jQuery Tooltip Plugin Demo

jQuery Tooltip Plugin Demo

Three elements with tooltips, default settings

Link to google
Input something please!

Code

$('#set1 *').tooltip();

Using bodyHandler to display footnotes in the tooltip

Some text referring to a footnote.

And here is the actual footnote, complete with nested HTML.

Code

$("#foottip a").tooltip({ 
    bodyHandler: function() { 
        return $($(this).attr("href")).html(); 
    }, 
    showURL: false 
});

An image with a tooltip

Code

$('#tonus').tooltip({ 
    delay: 0, 
    showURL: false, 
    bodyHandler: function() { 
        return $("<img/>").attr("src", this.src); 
    } 
});

Blocking tooltips

Click this button to block/unblock all tooltips

$("#block").click($.tooltip.block);

The next four links have no delay with tracking and fading, with extra content:

Link to yahoo Link to yahoo1 Link to yahoo2 Link to yahoo3

bgiframe test

Code

$('#yahoo a').tooltip({ 
    track: true, 
    delay: 0, 
    showURL: false, 
    showBody: " - ", 
    fade: 250 
});

Tooltips with extra classes. Useful for different tooltip styles on a single page.

Note how the one on the right gets a different background image when at the right viewport border.
A fancy tooltip, now with some custom positioning. A fancy tooltip, now with some custom positioning.

And now, for the fancy stuff, a tooltip with an extra class for nice shadows, and some extra content

bgiframe test

Code

$("#fancy, #fancy2").tooltip({ 
    track: true, 
    delay: 0, 
    showURL: false, 
    opacity: 1, 
    fixPNG: true, 
    showBody: " - ", 
    extraClass: "pretty fancy", 
    top: -15, 
    left: 5 
}); 
 
$('#pretty').tooltip({ 
    track: true, 
    delay: 0, 
    showURL: false, 
    showBody: " - ", 
    extraClass: "pretty", 
    fixPNG: true, 
    opacity: 0.95, 
    left: -120 
});

Selects

1. option 2. option 3. option

Image map with tooltips.

Code

$("map *").tooltip({ positionLeft: true });

Testing repositioning at viewport borders

Tooltip with fixed width
Google me!
Google me!

Tooltip width auto width
Google me!
Google me!

Code

$('#right a').tooltip({ 
    track: true, 
    delay: 0, 
    showURL: false, 
    extraClass: "right" 
}); 
$('#right2 a').tooltip({ showURL: false, positionLeft: true });

Yahoo doo

more content