jQuery tooltip not working in IE

Question

I am using the jquery tooltip and here is the code for it

this.tooltip = function()
            {   
             var xOffset = -10;
             var yOffset = -175;  

                $("a.tooltip").hover(function(e)
                {             
                 this.t = this.title;
                 this.title = "";
                 var breakdownData = "";
                var header = "<b>This document contains:</b><br />";

                switch(this.id)
                {
                    case '_ctl0_MasterContentPlaceHolder_hpl_DownloadCCPS1':
                        breakdownData = "<div style='padding-left:30px;'><br /></div>";
                        break;
                    case '_ctl0_MasterContentPlaceHolder_hpl_DownloadCCPS2':
                        breakdownData = "<div style='padding-left:30px;'></div>";
                        break;
                    case '_ctl0_MasterContentPlaceHolder_hpl_DownloadCCPS3':
                        breakdownData = "<div style='padding-left:30px;'></div>";
                        break;
                    case '_ctl0_MasterContentPlaceHolder_hpl_DownloadCCPS4':
                        breakdownData = "<div style='padding-left:30px;'></div>";
                        break;
                }   

                 $("body").append("<div id='tooltip' style='width:350px; padding-left:15px; font-size:11px;'>"+ header + breakdownData +"</div>");
                 $("#tooltip")
                  .css("top",(e.pageY - xOffset) + "px")
                  .css("left",(e.pageX + yOffset) + "px")
                  .fadeIn("fast");  
            },
                function()
                {
                 this.title = this.t;  
                 $("#tooltip").remove();
            }); 

                $("a.tooltip").mousemove(function(e)
                {
                 $("#tooltip")
                  .css("top",(e.pageY - xOffset) + "px")
                  .css("left",(e.pageX + yOffset) + "px");
                });   
        };

        $(document).ready(setTimeout("tooltip()", 500));



#tooltip
    {
     position:absolute;
     border:1px solid #333;
     background:#f7f5d1;
     padding:2px 5px;
     color:#333;
     display:none;
     width:350px;
    }

and then you just have to add the tooltip class to your anchor tag
Now this works fine in Firefox but it does not work in IE. Has anyone else experienced this?

Here is a link to the original which seems to work just fine http://cssglobe.com/lab/tooltip/01/

Thank You

Answer 1

I was able to test it fine in both FF3, IE6, and IE7. What problems are you experiencing?

I did receive one bug in Firebug however:

fn.call is not a function jquery-1.2.6.js Line 2295
    jQuery.readyList.push( function() { return fn.call(this, jQuery); } );

Which led me to change your $(document).ready function to:

$(document).ready(function(){
    setTimeout("tooltip()", 500)
});

Not sure if that will solve your problem, but give it a try.

Answer 2

I found the problem:

I was using our older version of the jquery library. I switched it over to the new file and it works fine now.

I kept our older version because I was not sure how backward compatible jquery is. We have had some issues with mootools not being backward compatible. I am going to ask another question about this to see what people have to say.

Thanks for your help Chris you get +1