basic JQuery tooltip plugin
example:
$(function(){
$("span#tooltip").hover(function(){
$(this).toolTip({text:"ToolTip example..."});
},function(){
$(this).toolTip("destroy");
});
});
you can alter the CSS by including the properties along with the text, i.e.
{text:"ToolTip example...",css:{width:"100px"}}
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);}
})($);
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.
<span id="tooltip" title="text here...">blah blah blah</span>
and use
$(function(){
$("span#tooltip").hover(function(){
$(this).toolTip({text:this});
},function(){
$(this).toolTip("destroy");
});
});