Firefox 3.6 issue with jQuery tooltips

JavaScript
1

Hey,

I’m new to jQuery and have this issue with the tooltips feature from one of the Sitepoint books I purchased. In Firefox 3.5.8 it works fine, but in Firefox 3.6 it has a strange behavior (and, go figure, several users of our Web site have Firefox 3.6):

When a visitor to the Web site scrolls hovers over a link with a tooltip, instead of displaying the tooltip, the browser strolls to the top of the page. Here is the code:

var Tooltips =
{
  init: function()
  {
    var links = document.getElementsByTagName("a");
    
    for (var i = 0; i < links.length; i++)
    {
      var title = links[i].title;
      
      if (title && title.length > 0)
      {
        Core.addEventListener(links[i], "mouseover", Tooltips.showTipListener);
        Core.addEventListener(links[i], "focus", Tooltips.showTipListener);
        Core.addEventListener(links[i], "mouseout", Tooltips.hideTipListener);
        Core.addEventListener(links[i], "blur", Tooltips.hideTipListener);
      }
    }
  },

  showTip: function(link)
  {
    Tooltips.hideTip(link);

    var tip = document.createElement("span");
    tip.className = "tooltip";
    var tipText = document.createTextNode(link.title);
    tip.appendChild(tipText);
    link.appendChild(tip);
    
    link._tooltip = tip;
    link.title = "";
    
    // Fix for Safari2/Opera9 repaint issue
    document.documentElement.style.position = "relative";
  },
  
  hideTip: function(link)
  {
    if (link._tooltip)
    {
      link.title = link._tooltip.childNodes[0].nodeValue;      
      link.removeChild(link._tooltip);
      link._tooltip = null;
      
      // Fix for Safari2/Opera9 repaint issue
      document.documentElement.style.position = "static";
    }
  },

  showTipListener: function(event)
  {
    Tooltips.showTip(this);
    Core.preventDefault(event);
  },
  
  hideTipListener: function(event)
  {
    Tooltips.hideTip(this);
  }
};

Core.start(Tooltips);

Any help will be greatly appreciated!

:slight_smile:

2

Found a fix if anyone is interested: Comment out the workaround for Safari and Opera Web browsers. This fixes the display issue with Firefox 3.6. A necessary evil, as more visitors to the Web site use Firefox instead of Opera or Safari.

    // Fix for Safari2 and Opera9 repaint issue
    // Commented out to correct display issue with Firefox 3.6
    // Sorry Opera and Safari users!
    // document.documentElement.style.position = "static";
},
  
  hideTip: function(link)
  {
    if (link._tooltip)
    {
      link.title = link._tooltip.childNodes[0].nodeValue;      
      link.removeChild(link._tooltip);
      link._tooltip = null;

      // Fix for Safari2 and Opera9 repaint issue
      // Commented out to correct display issue with Firefox 3.6
      // Sorry Opera and Safari users!
      // document.documentElement.style.position = "static";

:cool: