jQuery: When not hovering over element X or Y, hide Y?

I have a few images lined up next to eachother, and whenever i hover one of the images, a tooltip appears for that image (with some information etc). The tooltip infomration is loaded with ajax, but that's irrelevant.

The problem is that the tooltip is loaded when i hover one of the images, and it disappears whenever i hover outside of it. So i am not able to hover over the tooltip, which i need to be able to.

So i thought of the solution to log every element i'm hovering over in an object. Like this:

$('*').mouseenter(function() {
    currently_hovering = $(this);
});

and then when i hover out of the image, check if the mouse is hovering over the tooltip, and if it is, then do nothing, if it's not, then hide the tooltip. Sounds good, right? But for some reason it refuses to log w开发者_Go百科henever i mouse over the tooltip. It still acts as if i am over the image (but the tooltip flashes terribly when i move the mouse around in it).

I am assuming it doesn't log over the tooltip because it is absolutely positioned? It is positioned above the image (that way i'm able to move the mouse to it without hiding the it). I've tried using mouseenter/mouseover and hover, all with the same result.

Are there any solutions to this?

Part of the problem can be the fact that you are loading the information with ajax.

You need to use the live() function on data added to the page after the normal page load for scripts to work on the said data.

Sort of like this:

    $('.day').live('mouseover mouseout',function(e) {
        if (e.type === 'mouseover') {
            $(this).addClass('day-hover');
        } else {
            $(this).removeClass('day-hover');
        }
    });

The flashing will be because when you move the mouse over the tooltip, you're no longer hovering over that image and it's removing it, then when it's removed, you are all of a sudden hovering over the image again so it re-appears.

Sounds like the onmouseout call of the image is being called before the onmouseover of the tooltip when you hover over the tooltip, so your currently_hovering variable is not set to the tooltip.

Could you try using a timeout when you hover out of the image? Even a timeout of 0 seconds might work, just enough to let the browser process that the tooltip has been hovered over before it checks the value of currently_hovering?

Maybe you can wrap your image into for example <div> tag, have jquery "listen" on hover of that div tag and add your tooltip inside this tag right after image itself. Then hovering over tooltip shouldn't cause flickering, because you "dont leave" div that is causing it to be visible. Something like

<div class="imageWrapper">
  <img src="source" />
  <span class="tooltip">tooltip text</span>
</div>

then js would be something like

$('div.imageWrapper').hover(function(){
  var tooltipText = callWhateverMethodToLoadTooltipText();
  if($('span.tooltip',$(this)).length == 0)
    $(this).append('<span class="tooltip">' + tooltipText + '</span>');
  else
    $('span.tooltip',$(this)).text(tooltipText).show();
}, function(){
  $('span.tooltip', $(this)).hide();
});