How can I show UI hints for form controls like the Stack Overflow Career CV form does?

Question

I'm trying to show some UI Hints on an ASP.NET MVC 2 app, much like the way they are displayed on the careers site when you edit/fill out your resume: when a form control has focus, a little description of how to enter the required information appears next to it.

Example #1 http://shog9.com/so_careertip2.png Example #2 http://shog9.com/so_careertip1.png

What is the best method to show these suckers...

Answer 1

Something in the line of:

CSS:

.field{position:relative;}
.field-help{display:none;background:yellow;position:absolute;left:200px;top:0;}

HTML:

<div class="field">
    <input type="text">
    <div class="field-help">Help text</div>
</div>

JQUERY:

$('.field input').bind('focus', function(e) {
    $(e.target).next('.field-help').show();
}).bind('blur', function(e) {
    $(e.target).next('.field-help').hide();
})