Simple tooltip apply on all Title attributes in Web App - jQuery plugin

A few weeks ago I needed to display a tooltip for all fields having title attributes in web application. There are lots of jQuery plugins for that but I just needed a simple one which display a message on mouseover.
The text displayed in tooltip is the same as the TITLE attribute of the element.Either it become set as ToolTip on web controls in aspx page or on Resource Files(.resx)

(function($)
{
    $.fn.simpletooltip = function()
    {
        return this.each(function()
        {         
            if ($(this).attr("title").length > 0)
            {
                var text = $(this).attr("title");
                $(this).attr("title", "");             
                if (text != undefined)
                {
                    $(this).hover(function(e)
                    {
                        //alert("hover");
                        var tipX = e.pageX + 12; //set acc to ur need
                        var tipY = e.pageY + 12; //set acc to ur need
                        $(this).attr("title", "");
                        $("body").append("
");
                        if ($.browser.msie)
                            var tipWidth = $("#simpleTooltip").outerWidth(true)
                        else
                            var tipWidth = $("#simpleTooltip").width()
                        $("#simpleTooltip").width(tipWidth);
                        $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");

                    },
   function()
   {
       $("#simpleTooltip").remove();
       $(this).attr("title", text);
   });
                    $(this).mousemove(function(e)
                    {                      
                        var tipX = e.pageX + 12;
                        var tipY = e.pageY + 12;
                        var tipWidth = $("#simpleTooltip").outerWidth(true);
                        var tipHeight = $("#simpleTooltip").outerHeight(true);
                        if (tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;
                        if ($(window).height() + $(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
                        $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
                    });
                }
            }
        });
    }
})(jQuery);

this.hidetooltip = function()
{
    $("#simpleTooltip").remove();
    $(this).attr("title", "");
};

CSS :

#simpleTooltip 
{
 position:absolute;
    border  :1px solid #333;  
 background:#f7f5d1;
 padding:5px;
 color:#333;
 cursor:pointer;
 font-weight:bolder;
 
 display:none;
 border-radius: 4px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 }

How to use :

$("#some-element").simpletooltip()
or
$("a.some-class").simpletooltip()
or
$("input[type='button']").simpletootip()

or Set it on Ajax PageLoad() to set back on async postback using updatePanel :

 function pageLoad()
         {
              // use to hide all tooltip on Async postback in updatepanel
              hidetooltip();
             //use when to apply on those elements having tooltip Css Class
             $(".tooltip").simpletooltip();
            //use to apply on whole input type fields on Web Application
             $("input").simpletooltip();
         }

Additional Info :

Tested with IE 6+, Firefox 3, Safari 4 and Opera 9
jQuery 1.3.2 (it should work with previous releases of jQuery, but I didn't test it)

Click here to download the simpletooltip jquery plugin.