Question

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 whenever 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?

Answer 1

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');
        }
    });