# 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

    $("#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

### 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

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