jQuery tooltip ui: issue with using onmouseover and getting double displays

Question

Please see attached image:

The html (I just broke it up in 3 lines so you wouldn't have to scroll to the right):

<!-- MapServer Template -->
<area shape="circle" coords="[shpxy precision=0 proj=image yf=",7" xf=","]"
title="[name]" alt="[name]" onmouseover='displayCityInfo("[name]"); 
displayToolTip();' onmouseout="hideCityInfo()">

The jquery:

function displayToolTip() {
                    $( document ).tooltip({track: true, items: '[title]', content: getContent});
            }

            function getContent() {
                    var element = $(this);
                    if (element.is('[tooltip]')) {
                            var src = element.attr('tooltip');
                            return '<img src="' + src + '" width="100">';
                    }
                    if (element.is('[title]')) {
                            return element.attr('title');
                    }
            }

The issue:

I am not sure why there is basically "double hovers". If I just move my mouse around the map quickly, the names get stacked on top of each other in the top left corner.

1) I do not want any tool tips in the top left corner.

2) I just want to hover over a golden point, and the tool tip appears. As you can see in the image, this is happening...somewhat.

3) Don't mind the teal-colored rectangle.

The goal:

Remove the tool tips in the top left corner, and just have tool tips when you hover over a golden point.

Any input on the matter is appreciated. I was looking through the documentation but I am not sure what I'm doing wrong.

Answer 1

Tooltips are one of those things that never quite works the way you expect it to and end up taking a lot more time than you expect. There a lot of factors involved but most notoriously are timing and browser type and version.

The timing issue: if the element you are hovering on has an alt or a title attribute at render time, once the hover event fires and the listener is called, it's too late, the default tooltip will show no matter what you at that point. Sometimes, you might get lucky and solve it with a event.preventDefault() or browser equivalents.

The browser issue: unsurprisingly, many versions of IE (7,8,9) once the alt or title attribute has been rendered, there is just no way to stop it from displaying the default tooltip. There are several workarounds but most include removing alt and title attributes from the html itself (i.e. before the browser has a chance to see it) and using an xhr to get the text contents of the tooltip.

Hope this helps.