jQuery Tooltip Plugin Demo

Three elements with tooltips, default settings Link to google

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:

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. Koblenz Wiesbaden Mainz Frankfurt Mannheim Heidelberg Würzburg Bamberg Nürnberg Karlsruhe Heilbronn Stuttgart Ulm Augsburg Baden

Code

$("map *").tooltip({ positionLeft: true });
Testing repositioning at viewport borders

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