jQuery Tooltip Plugin Examples

Three elements with tooltips, default settings Link to google

Code

$('#set1 *').Tooltip();
An image with a tooltip

Code

$('img').Tooltip({
	delay: 0
});
Blocking tooltips
$("#block").click($.Tooltip.block);
The next four links have no delay with tracking, with extra content:

Code

$('#yahoo a').Tooltip({
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - ",
	opacity: 0.85
});
Two tooltips with extra classes. Useful for different tooltip styles on a single page. 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").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
});
Image map with tooltips. Karte Koblenz Wiesbaden Mainz Frankfurt Mannheim Heidelberg Würzburg Bamberg Nürnberg Karlsruhe Heilbronn Stuttgart Ulm Augsburg Baden

Code

$("map *").Tooltip();
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 });