0

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.

Damn tooltips!

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 :)

1
  • 1
    Since you're using jQuery, why not use one of the tooltip plugins? We use one on our current project at work that is pretty good (but I forget which one, sorry). Even if you don't want to use a plugin you could have a look at how they work...
    – nnnnnn
    Jan 15, 2012 at 5:57

1 Answer 1

4

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

7
  • OK, I feel silly now. I did try setting an empty title attribute... but I see now that I did it in the wrong spot. hangs head in shame Jan 15, 2012 at 5:54
  • Spoke too soon :( Tooltips are still there, no matter where or how often I add title="". Jan 15, 2012 at 6:05
  • 1
    @dburr I'd be interested to see a link, or see you recreate this. firefox only tooltips the contents of the "title" attribute
    – Sinetheta
    Jan 15, 2012 at 6:08
  • 1
    @dburr - Can you setup a fiddle? Jan 15, 2012 at 6:09
  • 1
    OK finally got to the bottom of it. If I set a null title for my <TD> element (the one that is triggering mouseover) then no tooltips appear. Phew! Jan 16, 2012 at 0:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.