jQuery Tooltip Widget 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").jtooltip({
	template: "",
	bodyHandler: function(el) {
		return $($(this.element[0]).attr("href")).html();
	}
});
An image with a tooltip

Code

 
$('#tonus').jtooltip({
	delay: 0,
	template: "",
	bodyHandler: function(el) {
		return $("<img/>").attr("src", this.element[0].src);
	}
});
The next four links have no delay with fading:

Code

 
$('#yahoo a').jtooltip({
	delay: 0,
	fade: 1050
});
Selects
Testing repositioning at viewport borders

Tooltip width auto width
Google me!
Google me!

Code

$('#right a').jtooltip({
	delay: 0,
	tooltipClass: "ui-widget-content ui-corner-all right"
});
$('#right2 a').jtooltip({ });
Tooltip with special template string and local JSON parameter Simple Link

Code

 
$('#jsonhref').jtooltip({
	delay: 100,
	fade: 250,
	template: "This is tooltip above href. And href is: {href}",
	getJSONparams: function (el) { return { href: $(this.element[0]).attr("href") }; }
});

$('#jsontext').jtooltip({
	delay: 100,
	fade: 250,
	template: "{Title}. And text value is: {text}",
	getJSONparams: function (el) { return { text: this.element[0].value, Title : "This is tooltip above text" }; }
});
Tooltip with special template string and get remote JSON response

Code

 
$("#lblUserName").jtooltip({
	delay: 100,
	fade: 250,
	loadURL: 'http://localhost/JSON.html',
	template: '<div style="color:red"> Thank you. <br /> {foreach:} <p style="color: green; margin: 10px;"> Wine - {wine} </p> <span>Sugar - {sugar} </span> <span> Lemon is {lemon} </span> {/foreach:} </div>'
});
Show and hide Tooltip programatically. Also set diferent position

Code

 
jjtLabel = $("#lbltooltip").jtooltip({
	position_at: "right top",
	position_my: "left bottom",
	left: -50,
	top: -15
});

$("#btnShow").click ( function () {
	jjtLabel.jtooltip("show");
});

$("#btnHide").click ( function () {
	jjtLabel.jtooltip("hide");
});
Show tooltip status by binding onshow and onhide event

jTooltip status:

Code

 
jjtBindLabel = $("#lblbindtooltip").jtooltip({ });
jjtBindLabel.bind('onshow', function() { $('#lblstatus').text("Show"); } );
jjtBindLabel.bind('onhide', function() { $('#lblstatus').text("Hide"); } );