Small in size (3kb) script to enhance the look of tooltips. It works just like browser’s native tooltips with few options and styling via CSS. By default, the script applies to any element with a “title” attribute like links, paragraphs, images etc. but you can easily set it to affect only specific classes.

The code

The styling of tooltips is done via the style-my-tooltips.css file. On this demo I used some CSS3 for rounded corners.

#s-m-t-tooltip{
 position:fixed; 
 max-width:300px;  
 padding:6px 8px 8px 8px; 
 background:#222; 
 z-index:10; 
 display:inline-block; /*important*/
 /*font*/
 font-family:Verdana, Geneva, sans-serif; 
 font-size:11px; 
 line-height:16px;
 color:#fff; 
 /*css3 rounded corners*/
 -moz-border-radius:5px; 
 -khtml-border-radius:5px; 
 -webkit-border-radius:5px; 
 border-radius:5px;
}

The jquery.style-my-tooltips.js file

(function($){  
 $.fn.style_my_tooltips = function(options) {  
 var defaults = {  
  tip_follows_cursor: "on", 
  tip_delay_time: 1000
 };
 var options = $.extend(defaults, options);
 $("body").append("<div id='s-m-t-tooltip'></div>"); //create the tooltip container
 smtTip=$("#s-m-t-tooltip"); 
 smtTip.hide(); //hide it
    return this.each(function() {  
  function smtMouseMove(e){
   smtMouseCoordsX=e.pageX;
   smtMouseCoordsY=e.pageY;
   smtTipPosition();
  }
  function smtTipPosition(){
   var cursor_tip_margin_x=0; //horizontal space between the cursor and tooltip
   var cursor_tip_margin_y=24; //vertical space between the cursor and tooltip
   var leftOffset=smtMouseCoordsX+cursor_tip_margin_x+$(smtTip).outerWidth();
   var topOffset=smtMouseCoordsY+cursor_tip_margin_y+$(smtTip).outerHeight();
   if(leftOffset<=$(window).width()){
    smtTip.css("left",smtMouseCoordsX+cursor_tip_margin_x);
   } else {
    var thePosX=smtMouseCoordsX-(cursor_tip_margin_x)-$(smtTip).width();
    smtTip.css("left",thePosX);
   }
   if(topOffset<=$(window).height()){
    smtTip.css("top",smtMouseCoordsY+cursor_tip_margin_y);
   } else {
    var thePosY=smtMouseCoordsY-(cursor_tip_margin_y)-$(smtTip).height();
    smtTip.css("top",thePosY);
   }
  }
  $(this).hover(function(e) {  
   // mouseover
   var $this=$(this);
   $this.data("smtTitle",$this.attr("title")); //store title 
   var theTitle=$this.data("smtTitle");
   $this.attr("title",""); //remove title to prevent native tooltip showing
   smtTip.empty().append(theTitle).hide(); //set tooltip text and hide it
   smtTip_delay = setInterval(smtTip_fadeIn, options.tip_delay_time); //set tooltip delay
   if(options.tip_follows_cursor=="off"){
    smtMouseMove(e);
   } else {
    $(document).bind("mousemove", function(event){
     smtMouseMove(event); 
    });
   }
  }, function() {  
   // mouseout
   var $this=$(this);
   if(options.tip_follows_cursor!="off"){
    $(document).unbind("mousemove");
   }
   clearInterval(smtTip_delay);
   if(smtTip.is(":animated")){ 
    smtTip.hide();
   } else {
    smtTip.fadeTo("fast",0);
   }
   $this.attr("title",$this.data("smtTitle")); //add back title
  });
  function smtTip_fadeIn(){
   smtTip.fadeTo("fast",1,function(){clearInterval(smtTip_delay);});
  }
 });  
 };  
})(jQuery);  

How to use it

All you need is to download the .zip file and extract the jquery.style-my-tooltips.js and style-my-tooltips.css on the same directory of your document, on which you must insert the following code inside the head tag.

<link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.style-my-tooltips.js"></script>
<script type="text/javascript">  
$().ready(function() {  
 //applies to all elements with title attribute. Change to ".class[title]" to select only elements with specific .class and title
 $("[title]").style_my_tooltips({ 
  tip_follows_cursor: "on", //on/off
  tip_delay_time: 1000 //milliseconds
 });  
});  
</script>  

You can set the tooltip delay time and behavior via the two options.