Question

I have two div classes, say A and B. When the mouse is over div A, div B should appear, then if the mouse is over A or B, div B should stay opened. If the mouse is out of both, A and B divs, B should disappear. (As you probably guess this is a simple tooltip script)

This is the jquery code I wrote:

$(document).ready(function() {
    function show() {
        $("BBB").css({'display':'block'});
    }

    $("AAA").each(function() {
        $(this).mouseover(function() {
            show();
        });

        $(this).mouseleave(function() {
            time = setTimeout("hide()", 200);
        });

        $("BBB").mouseleave(function() {
            setTimeout("hide()", 200);
        });

        $("BBB").mouseenter(function() {
            clearTimeout(time);
        });
    });
});

function hide() {
    $("BBB").css({'display':'none'});
}

The problem is that when I move from B to A, B disappears! I want to it to disappear only if the mouse is neither over A, nor B. How can I fix this problem?

Answer 1

There are a few small problems with your code. The one which is biting your right now is that you aren’t clearing BBB’s timeout when you enter AAA. You can fix this by adding a clearTimeout to AAA’s mouseover handler.

Secondly, it’s safest to clear this kind of timeout before you set it each time, so that you don’t have your timeout tracking overwritten if something unexpected happens. (It’s always safe to clear a timeout, even if it’s invalid or has already occurred.)

Lastly, though this is most likely only a problem in your example code, you’re leaking time into the global object. 😉

Try this instead:

$(document).ready(function() {
    var time;

    function show() {
        $("BBB").css({'display':'block'});
    }

    $("AAA").each(function() {
        $(this).mouseover(function() {
            clearTimeout(time);
            show();
        });

        $(this).mouseleave(function() {
            clearTimeout(time);
            time = setTimeout("hide()", 200);
        });

        $("BBB").mouseleave(function() {
            clearTimeout(time);
            time = setTimeout("hide()", 200);
        });

        $("BBB").mouseenter(function() {
            clearTimeout(time);
        });
    });
});

function hide() {
    $("BBB").css({'display':'none'});
}