.tip {  
    width: 212px;  
    padding-top: 37px;  
    display: none;  
    position: absolute;  
    background: transparent url(images/tipTop.png) no-repeat top;}  
  
.tipMid {background: transparent url(images/tipMid.png) repeat-y; padding: 0 25px 20px 25px;}  
.tipBtm {background: transparent url(images/tipBtm.png) no-repeat bottombottom; height: 32px;}  

$.fn.betterTooltip = function(options){  
  
        /* Setup the options for the tooltip that can be 
           accessed from outside the plugin              */  
        var defaults = {  
            speed: 200,  
            delay: 300  
        };  
  
        var options = $.extend(defaults, options);  
  
        /* Create a function that builds the tooltip 
           markup. Then, prepend the tooltip to the body */  
        getTip = function() {  
            var tTip =  
            "<div class='tip'>" +  
                "<div class='tipMid'>"    +  
                "</div>" +  
                "<div class='tipBtm'></div>" +  
            "</div>";  
            return tTip;  
        }  
        $("body").prepend(getTip());  
  
        /* Give each item with the class associated with 
           the plugin the ability to call the tooltip    */  
        $(this).each(function(){  
  
            var $this = $(this);  
            var tip = $('.tip');  
            var tipInner = $('.tip .tipMid');  
  
            var tTitle = (this.title);  
            this.title = "";  
  
            var offset = $(this).offset();  
            var tLeft = offset.left;  
            var tTop = offset.top;  
            var tWidth = $this.width();  
            var tHeight = $this.height();  
  
            /* Mouse over and out functions*/  
            $this.hover(function() {  
                tipInner.html(tTitle);  
                setTip(tTop, tLeft);  
                setTimer();  
            },  
            function() {  
                stopTimer();  
                tip.hide();  
            }  
        );           
  
        /* Delay the fade-in animation of the tooltip */  
        setTimer = function() {  
            $this.showTipTimer = setInterval("showTip()", defaults.delay);  
        }  
  
        stopTimer = function() {  
            clearInterval($this.showTipTimer);  
        }  
  
        /* Position the tooltip relative to the class 
           associated with the tooltip                */  
        setTip = function(top, left){  
            var topOffset = tip.height();  
            var xTip = (left-30)+"px";  
            var yTip = (top-topOffset-60)+"px";  
            tip.css({'top' : yTip, 'left' : xTip});  
        }  
  
        /* This function stops the timer and creates the 
           fade-in animation                          */  
        showTip = function(){  
            stopTimer();  
            tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);  
        }  
    });  
};