2008-11-11 9 views
1

J'utilise l'info-bulle jquery et est ici le code pour qu'ilinfobulle jQuery ne fonctionne pas dans IE

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

Tout ce que je besoin de faire est d'ajouter la classe tooltip à la balise d'ancrage qui fonctionne bien dans Firefox, mais pas dans IE. Quelqu'un d'autre a-t-il vécu cela?

Voici un lien vers l'original qui semble fonctionner très bien http://cssglobe.com/lab/tooltip/01/

Merci Vous

+0

Existe-t-il un autre code requis ou des bibliothèques supplémentaires (en plus de jquery core)? J'essaie de le tester mais je n'arrive pas à le faire fonctionner correctement (FF3) –

+0

Quelle version de jQuery utilisez-vous? –

+0

jquery-1.2.6.min.js –

Répondre

3

j'ai pu le tester bien dans les deux FF3, IE6 et IE7. Quels problèmes éprouvez-vous?

Je n'ai reçu un bogue dans Firebug cependant:

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

Ce qui m'a conduit à changer $ (document) fonction .ready à:

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

Je ne sais pas si cela va résoudre votre problème mais essayez-le.

Questions connexes