Cancel setTimeout if mouse is over div

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

First, put B inside of A:

<div class="a">
    AAA
    <div class="b">
        BBB
    </div>
</div>

Then, abandon your javascript and make life easier with plain old css:

.b
{
    display: none;
}
.a:hover .b
{
    display: block;
}

Edit - Here's a live example using the CSS technique: http://jsfiddle.net/gilly3/sBwTa/1/

Edit - If you must use the JavaScript, just add clearTimeout(time) to show(). But, let's also simplify your code:

$(function()
{
    var time = 0;
    function show()
    {
        clearTimeout(time);
        $("BBB").show(); // Existing jQuery that does $().css("display","block")
    }
    function hide()
    {
        time = setTimeout(function()
        {
            $("BBB").hide();
        }, 200);
    }
    $("AAA,BBB").mouseenter(show).mouseleave(hide);
});

Answer 2

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

Answer 3

Here's a script that works with meaningful function names that should make it easy to see what's going on. You have to cancel the hiding from mouseenter on both divs.

$(document).ready(function() {
  var timerId, delay = 300;
  var a = $("#A"),
    b = $("#B");

  function stopHide() {
    clearTimeout(timerId);
  }

  function showTip() {
    b.show();
  }

  function startHide() {
    timerId = setTimeout(function() {
      b.hide();
    }, delay);
  }
  a.mouseenter(showTip).mouseenter(stopHide).mouseleave(startHide);
  b.mouseenter(stopHide).mouseleave(startHide);
});

div {
  border: 2px dashed firebrick;
  float: left;
  font-size: 50pt;
  font-weight: bold;
  padding: 5px;
  margin: 5px;
}

#B {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='A'> A </div>
<div id='B'> B</div>

Previously at http://jsfiddle.net/92jbK/1/

Answer 4

You code is wrong :) Try this:

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #AAA, #BBB {
            width:100px;
            height:100px;
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <div id="BBB">
        BBB
    </div>
    <div id="AAA">
        AAA
    </div>
    <script src="http://www.google.com/jsapi"></script>
    <script>
        //VISIBLE 
        function hide() {
            $("#BBB").css({'display':'none'});
        }
        function show() {
            $("#BBB").css({'display':'block'});
        }

        // Load jQuery
        google.load("jquery", "1");
        google.setOnLoadCallback(function() {
            // NOT VISIBLE
            // function hide() {
            //     $("#BBB").css({'display':'none'});
            // }
            // function show() {
            //     $("#BBB").css({'display':'block'});
            // }

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

                $("#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);
                    });
                });
            });


        });
    </script>
</body>
</html>

Answer 5

one alternative is to use jquery's tooltip http://flowplayer.org/tools/tooltip/index.html

then you can just do for example:

$('#A').live(function() {
      $(this).tooltip({
      relative: true,
      position: 'top center',
      delay: 200,
      effect: !$.browser.msie ? 'fade' : 'toggle',
      fadeInSpeed: 100,
      fadeOutSpeed: 50,
      predelay: 500
    });
  });

and you just make div b of class tooltip

Answer 6

Is time declared outside all of this?

It is not in the same scope in the two functions you have it in above, so is not the same variable so the clearTimeout() call has no effect.

Declare it outside both with var time;, so that they refer to the same variable.