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