PHP Magento Tips

Powered by Blogger.

Show Tooltip Styled Magento Form Validation Error Messages

Rate this posting:

To display your form validation error messages in a tooltip style, you don't need to modify any code from your template file. It is a magic of CSS and Rest is Magento itself!!

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 skin/frontend/template/default/css/styles.css file ( it is located around line 2731 ), 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: 268px;
    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;
Tag : Magento, Messages
2 Comments On "Show Tooltip Styled Magento Form Validation Error Messages"

The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up..
ecommerce website development company | ECommerce Development Company in BangaloreEcommerce Website Design and Development Company in Bangalore | Magento Development Company

Thank you for sharing excellent information. Your website is very cool. Fully useful your blog post... Online Shopping Website

Back To Top