Comment déboguer un bogue IE

Question

Le code suivant fonctionne dans Google Chrome et Firefox, mais ne fonctionne pas dans IE8. Je ne sais pas pourquoi, c'est une infobulle et utilise jQuery. Ce n'est pas mon code. Lorsque vous utilisez Chrome ou Firefox, passez la souris sur l'élément, l'info-bulle s'affiche. Dans IE, l'info-bulle ne semble pas être un problème avec l'instruction hover.

J'ai essayé le débogage pas à pas mais jQuery crée une douzaine de variables ce qui rend le débogage presque impossible.

est ici le code

(function ($) { 

$.fn.easyTooltip = function (options) { 

    // default configuration properties 
    var defaults = { 
    xOffset : 10, 
    yOffset : 45, 
    tooltipId : "tooltip", 
    clickRemove : false, 
    content : "", 
    useElement : "", 
    animation : true 
    }; 

    var options = $.extend(defaults, options); 
    var content; 

    this.each(function() { 
    var title = $(this).attr("title"); 
    $(this).hover(function (e) { 
     content = (options.content != "") 
     ? options.content 
     : title; 
     content = (options.useElement != "") ? $("#" 
     + options.useElement).html() : content; 
     $(this).attr("title", ""); 
     if (content != "" && content != undefined) { 
     $("body").append("<div id='" + options.tooltipId 
     + "'>" + content + "</div>"); 
     $("#" + options.tooltipId).css("position", 
     "absolute").css("top", 
     (e.pageY - options.yOffset) + "px").css(
     "left", (e.pageX + options.xOffset) + "px") 
     .css("display", "none"); 
     if (options.animation == true) { 
     $("#" + options.tooltipId).animate({ 
      marginTop : "12px", 
      opacity : "show" 
      }, 400); 
     } else { 
     $('#' + options.tooltipId).show(); 
     } 

     } 
    }, function() { 
     $("#" + options.tooltipId).remove(); 
     $(this).attr("title", title); 
    }); 
    $(this).mousemove(function (e) { 
     $("#" + options.tooltipId).css("top", 
     (e.pageY - options.yOffset) + "px").css("left", 
     (e.pageX + options.xOffset) + "px") 
    }); 
    if (options.clickRemove) { 
     $(this).mousedown(function (e) { 
     $("#" + options.tooltipId).remove(); 
     $(this).attr("title", title); 
     }); 
    } 
    }); 

}; 

})(jQuery); 

Toute idée de savoir quel est le problème avec IE?

Answer 1

Parfois, lorsque vous créez un élément avec une valeur d'opacité .. et qu'il contient également un élément enfant que vous devez afficher dans mouseOver, IE ne contient pas l'élément enfant. C'est un bug commun que j'ai aussi affronté plusieurs fois. Ce que je fais habituellement est de garder l'opacité intacte. alors ça va marcher.

Cette technique m'a aidé plusieurs fois. Essayez si cela vous aide.