Show Magento form validation error messages in a tooltip
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.
8 comments
Zoran, do you have a snapshot of your site that I can check it out? 🙂
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. 🙂
Seems like not working 🙂 I believe you try to move the box to below rather than on right hand side? And seems missing the “arrow”?
http://i50.tinypic.com/35cln9v.jpg
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;
}
Yes. Hrvoje, any quick fixed?
I am sure there is a way to solve it, cant wait to apply it!
Thanks Hrvoje.
It is a great solution when you have input fields one below other. In James case, it could be a problem.
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 ?
Awesome! Works like a charm.
Any idea how to resolve this overlapped issues?
http://i48.tinypic.com/k4flva.jpg