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

Javascript:

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));            

CSS:

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

All I need to do is add the tooltip class to the anchor tag which works fine in Firefox but not in IE. Has anyone else experienced this?

Here is a link to the original which seems to work just fine /

Thank You

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

Javascript:

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));            

CSS:

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

All I need to do is add the tooltip class to the anchor tag which works fine in Firefox but not in IE. Has anyone else experienced this?

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

Thank You

• javascript
• jquery
• internet-explorer
• tooltip

Share Improve this question Follow edited Jun 22, 2012 at 14:15 Josh Mein asked Nov 11, 2008 at 14:46 Josh MeinJosh Mein 28.7k1515 gold badges7878 silver badges8888 bronze badges 3

• Is there any other code required, or additional libraries (besides jquery core). I'm trying to test it but can't get it to run properly at all (FF3) – Chris Serra Commented Nov 11, 2008 at 15:32
• What version of jQuery are you using? – Chris Serra Commented Nov 11, 2008 at 16:17
• Just for those who may be having similar issues, the problem seemed to be that I was using an older version of jquery. – Josh Mein Commented Jul 25, 2012 at 14:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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.