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 - No delay. The src value is displayed below the title

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