Question

I have a div with an image inside it. When I hover the image, I create a tooltip div thats absolutely positioned over part of the image (the absolute position is important). It contains the title and alt text.

This is all well and good until you hover the tooltip box. It doesn’t bubble down and it thinks I’m no longer hovering over the image, thus making the tooltip box disapear. But then it registers I’m hovering the image again and it goes back and forth between showing the tooltip box and hiding it.

Thus the flickering issue.

There are a bunch of posts on SO about the flickering issue and I’ve tried so many solutions but none have been working. I’ve tried Mouseover/mouseout, mouseenter/mouseleave, hover, and even using live() in combination with them. I even switched from creating the tooltip from scratch to having the empty div there so it would be in the DOM when the page loaded in case that was the issue. I really don’t know what to do anymore. Here is my code at the moment.

$("img").bind("mouseover", function() {
    var pimg = $(this);
    var position = pimg.position();
    var top = position.top;
    var left = position.left;
    var title = $(this).attr('title');
    var alt = $(this).attr('alt');
    $('.toolTip').css({'left' : left, 'top' : top, 'width' : width}).append('<div><h3>' + title + '</h3><p>' + alt + '</p></div>');
});

$("img").bind("mouseout", function() {
    $('.toolTip').empty();
});

Answer 1

The problem is a) you need to use mouseenter / mouseleave and b) the tooltip div needs to live inside the element that has the mouseenter / mouseleave listeners.

eg:

<div id="mouseoverdiv">
<div class="tooltip">some text</div>
<img src="" />
</div>