JQuery form tooltip

Question

In a big form, I want to display additional information on each form field when they are active, something like this:

So each form field has an associated tip text, and this tip text is displayed on focus.

Something linke this in html/javascript:

<input type="text" id="VIN" name="VIN" class="tooltipped">

<label for="VIN" class="formfieldtooltip">A vehicle Iden... </label>

<input type="text" id="Brand" name="Brand" class="tooltipped">

<label for="Brand" class="formfieldtooltip">In Danish "brand" means "fire"</label>

<script type="text/javascript">

    jQuery(function($) {

        $(".tooltipped").FormFieldToolTipBinder();

    });

</script>

That runs through all form fields with the class "tooltipped" and displays the associated label on focus.

Does something like that exist already, or do I have to write it myself?

And yes, I have googled - and found a lot of plugins to make the actual tooltips, but nothing that wires them up with formfields automagically like this.

Answer 1

It sounds like you may be stuck embedding tooltip content in the label elements - but if you're free to move the content into the alt attribute of your input elements, you can do what you want with qTip, like this:

<input type="text" id="VIN" class="tooltipped" alt="A vehicle iden...">

and

// content: false tells qtip to use the selected elements' alt text
$('.tooltipped').qtip({
    content: false,
    show: { when: { event: 'focus' } }
});

Answer 2

Actually it's quite easy to write yourself. Here's something to get you started:

var tooltip = function (formElementId) {
    var form = $('#' + formElementId),
        toolTipClass = 'tooltip',
        input = form.find('input.'+ tooltip);

    input.each(function (index, elem) {
        $(elem).focus(function () {
            $(this).parent().append('<div id="tooltip"></div>');
        })

        $(elem).blur(function () {
            $('#tooltip').remove();
        })
    });
}