Show Magento form validation error messages in a tooltip

Posted in Magento tips & tricks, magento shipping tips on October 29, 2012 0 comment(s)  

Here is a quick tip how to enhance your form validation error messages and show them in a tooltip.
There’s no need for any templates modification, all you have to do is edit your CSS file and update it with custom code.
Here is a short video demonstrating how does it work.

Show Magento form validation error messages in a tooltip

When error message is triggered, Magento injects div with the class “validation-advice”. This is the class we have to  edit in CSS file.

It has to be positioned absolutely relative to it’s container, which is input-box.

So, find the class .validation-advice in your styles.css file ( it is located around line 300 ), and replace it with:

----------------------------------------------------------

/* Form Validation */

.input-box {

position: relative !important;

}

.validation-advice {

background: #DB6D00;

bottom: -7px;

color: #fff;

font-size: 11px;

font-weight: bold;

line-height: 13px;

min-height: 13px;

padding: 10px;

position: absolute;

right: -150px;

width: 120px;

border-radius: 5px;

box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);

}

.validation-advice:after {

position: absolute;

left: -8px;

bottom: 8px;

content: " ";

width: 0;

height: 0;

border-top: 8px solid transparent;

border-bottom: 8px solid transparent;

border-right: 8px solid #DB6D00;

}

---------------------------------------------------

Please note that this code should overwrite “.validation-advice” class, and it is impelemented in Magento Default theme. If you have different theme, this code might not work exactly as-is.

From:  inchoo.net


This post was posted in Magento tips & tricks, magento shipping tips and was tagged with magento, ecommerce, magento community, magento store, magento news

Leave a comments
Your email address will not published. Required fields are marked *

What Our Clients Say?

  • Oscar Soto MANAGER
    ArrowHiTech has always impressed me! They are professionals and are quick to response to my needs. I have used
    them in the past and will continue to use them in the future. Thanks Martin and all the Staff at ArrowHiTech!!!
  • The guys of AHT solutions did a perfect job and are real profesionals. Definitely recommend them and will use them again!
  • Jonatas Leonel MANAGER
    Martin has a great team of Magento experts, I really liked the work he did for me. I asked him to customize my template following a couple of jpg files that I got from a designer and he worked on that template without the psd's - that was awesome, the result I got was really good.
  • I really enjoy working with ahtsolutions. Quick response to our questions, delivery the project in time and excellent skills. I hope to work with them soon
Request us now! Yahoo:gravitational_boy Email:info@mage-shop.com Skype:hyun_yoo_it +84437955813