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.

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

Answer 1

jQuery will simplify this, but it could easily be standard JS.

Something like:

$('.controlwithhinttext').focus(function() {
    // show hint
    $('#hint' + $(this).attr('hint_to_show_id')).show();
});

Where the form control has a custom attribute, or just use matching (not identical) IDs.

Answer 2

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();
})

Answer 3

Clean your ears!

Err, I mean use the jQuery Qtip plugin: http://craigsworks.com/projects/qtip/

It does 100% of the things your looking for and does it extremely well.