Question

I’m using jQuery (1.6.4) and using a slightly modified version of this method to add a do-it-yourself tooltip to my web app. (Basically I am dynamically generating a table, and putting up different tooltips whenever someone hovers over each cell of said table) Once the tooltip appears my code then issues a JSON call to get more information, which it then displays in the tooltip.

   $('table#status_table td').live('mouseover', function() {
      // Append the tooltip template and its value
      // make it a loading graphic until we complete fetching the data
      $(this).append('<div id="tooltip"><div class="tipHeader"></div><div title="" alt="" id="tooltip_area" class="tipBody"><img src="spinner_black.gif" alt="Wait..."></div><div class="tipFooter"></div></div>');    
      // fetch data
      $.getJSON('cgi-bin/get_more_information.cgi', function(data)  {
                    var results = data.results;
                    tipBodyString = '<em>(insert results here)</em>';
                    $('#tooltip_area').html(tipBodyString);
            });
        });

Everything works as expected, except that Firefox displays a tooltip that echoes the HTML string I use when updating the tooltip (tipBodyString in the code above). Here is a screenshot that should hopefully illustrate what I mean.

At first I thought it was just Firefox doing this, but then I tried it in Chrome and Safari and they display these unwanted tooltips as well.

I have absolutely no idea why these tooltips are being displayed. More importantly, is there any way to get rid of them? I want the monopoly on tooltips to go to my app 🙂

Answer 1

Set the title attribute with empty value to elements where you don’t need tooltip.