Validation feedback on hover

hi,  how do we get the validated messages on hover of the invalid fields ? 
2 answers

Aside from using widgets, there are actually quite some things you could do using only CSS/SASS. Here's an example of something I implemented for a client:

.error-on-hover {
	// .form-control {
	// 	background-color: $alert-danger-bg;
	// 	color: $alert-danger-color;
	// 	border-color: $alert-danger-border-color;
	// }
	.mx-validation-message {
		display: none;
	&:hover {
		.mx-validation-message {
			position: absolute;
			display: block;
			left: 15px;
			z-index: 2;
			margin-top: 8px;

Depending on what you require, the snippet above will need some tweaking to suit your specific needs. As is, you need to add a error-on-hover class to the input field you're targeting.

What you do need to realize when opting for the solution mentioned here is that:

  • Errors will only be visible immidiately by looking at the border color of the input field; when you take less color aware users into consideration, it can become less obvious that something needs correcting
  • To prevent your whole form from constantly jumping because of the hovering, I opted to simply show the validation message without the message impacting its surrounding elements
  • The possible downside of the previous bullet point is that your error message can overlap an input field directly beneath it.


Here's how we needed to use it:




Normally the validation feedback is a message under the field. Alternatively you can check out the bootstrap tooltip widget to be able to give your user a message when they hover over it. You can play around with conditional visibility to only have this show when a validation message is supposed to be shown.


Here is a link to the widget