JQuery tooltip
Platform: Javascript
Published Dec 16, 2010
Updated Dec 26, 2010
basic JQuery tooltip plugin
example:
you can alter the CSS by including the properties along with the text, i.e.
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);}
})($);