JQuery tooltip

Platform:  Javascript
Published  Dec 16, 2010
Updated  Dec 26, 2010
basic JQuery tooltip plugin
example:

Code

 
you can alter the CSS by including the properties along with the text, i.e.

Code

 


its not as diverse as other tooltips but it serves the same purpose as most and is only 1kb when compiled (function($){
methods = {
show: function(opts){
c = $.extend({
position: "absolute",
background: "#999",
color: "#333",
width: "auto",
border: "1px solid #666",
borderWidth: "thin 2px 2px thin"
},opts.css);
if (typeof opts.text=='object')
{
if(!opts.text.title)
return false;
tt = 1;
t = opts.text.title;
opts.ut = opts.text;
opts.text.title = null;
} else {
tt = 0;
t = opts.text;
}
this.data.toolTip = $.extend({id:"TTip"+Math.floor(Math.random()*10000),tx:t,t:tt},opts);
$('<div id="'+this.data.toolTip.id+'">').text(t).css(c).appendTo('body');
return $(this).bind('mousemove',methods.pos);
},
destroy: function(){
$t = $(this).data.toolTip;
if($t.text&&typeof $t.ut=='object')
$t.ut.title = $t.tx;
return $("#"+$t.id).remove().unbind('mousemove');
},
pos: function(e){
ie = document.all?1:0;
pX = ie?e.clientX+document.documentElement.scrollLeft:e.pageX;
pY = ie?e.clientY+document.documentElement.scrollTop:e.pageY;
return $("#"+$(this).data.toolTip.id).css({left: pX+"px",top: pY+10+"px"});
}
};
$.fn.toolTip = function(method){return methods[method]?methods[method].apply(this,Array.prototype.slice.call(arguments,1)):methods.show.apply(this,arguments);}
})($);

Comments

Sign in to comment.
sunslayer   -  Dec 26, 2010
updated the code you can use the this keyword in place of the text to use the default text that would normally be displayed e.g.

Code

 
and use

Code

 
 Respond  
Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.