OnMouseOver notification for my form

Question

This is what I need to accomplish:

For a form fields that need validation, when cursor stops at that field the instructions for correct input format should show up.

What I am currently attempting to do is use the onmouseover event however I am not sure how to create a notification box to show the format. I don't want an alert but rather another box popping up on the side with the instructions.

This is an example of what I want to accomplish:

Answer 1

Simple way to achieve what you need using jQuery.

HTML:

<div class="input"> 
    Email: <input type="text" data-toggle="tooltip" title="Insert your e-mail"/>
</div>

Javascript:

$('input[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'right',
});

CSS:

.input {
    padding: 10px 3px;
}

Example: http://jsfiddle.net/sfxajL1h/4/