jQuery Tooltip Plugin Demo

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

$('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
});
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
});
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 });

Google Links