Show Magento form validation error messages in a tooltip

messages

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.

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.


About Hrvoje Jurisic

Team Leader, Frontend Developer, Designer / Illustrator

Hrvoje is Certified Frontend Magento Developer and creator of Inchooers, your favorite comic.

Read more posts by Hrvoje / Visit Hrvoje's profile

8 comments

  1. Correct, I moved the box to below.
    Try to change the value for “top” and “left” in class .validation-advice:after to show the arrow.

    It’s working from my side. πŸ™‚

  2. James,
    if you want to have error message below input fields, try with this:

    .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;
    margin-top:10px;
    right: -150px;
    width: 120px;
    border-radius: 5px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    }
    .validation-advice:after {
    border-bottom: 8px solid #DB6D00;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    bottom: 8px;
    content: ” “;
    height: 0;
    left: 9px;
    position: absolute;
    top: 26px;
    width: 0;
    }

  3. Yes. Hrvoje, any quick fixed?

    I am sure there is a way to solve it, cant wait to apply it!

  4. Is this the best way to change and modify CSS in Magento ? I’m new to magento and I think there must be a better way to overriden the current standard CSS from magento, something like load another custom css ?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.