Question

The following code works in Google Chrome and Firefox, but don’t work in IE8. I don’t know why, it’s a tooltip and uses jQuery. It’s not my code. When you run on Chrome or Firefox, hover over the element, the tooltip shows. In IE the tooltip doesn’t, seems like a problem with the hover statement.

I tried step by step debugging but jQuery creates dozen of variables which makes debugging almost impossible.

Here’s the 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);

Any idea to know what the problem is with IE?

Answer 1

Some times when you make any element with an opacity value.. and it has a child element also which you need to show in mouseOver, IE does not the child element. It is a common bug I also faced several time. What I usually do is keep the opacity untouched. then it will work.

This technique helped me several times. Try whether it helps you.