setTimeout触发得太快

Question

我有一个工具提示（只是一个div），出现在另一个元素的mouseover事件上。 我试图将工具提示隐藏在主要元素的mouseleave事件上，但是，如果鼠标悬停在工具提示上，我希望工具提示保持可见。

工具提示直接位于其元素下方。

我的代码如下：

var option_hide_timeout;

$(".option").mouseover(function () {
    showTooltip($(this));
});
$(".option").mouseleave(function () {
    option_hide_timeout = setTimeout(hideTooltip(), 2000); // delay the hiding to allow the mouse to enter the tooltip
});
$("#option_tt").mouseenter(function () {
    clearTimeout(option_hide_timeout);
});
$("#option_tt").mouseleave(function () {
    hideTooltip();
});

function showTooltip(parent) {
    var parentPos = parent.position();
    $("#option_tt").css({
        visibility: "visible",
        left: parentPos.left,
        top: parentPos.top + $(parent).height()
    });
}
function hideTooltip() {
    $("#option_tt").css("visibility", "hidden");
}

问题在于，工具提示会在鼠标离开主要元素后立即隐藏。 该问题在Chrome，Firefox，Opera和IE中仍然存在。

不管延迟的值是多少（我的代码中的2000只是一个示例，实际上它都可能更短），它会立即触发。

我尝试同时使用mouseover / mouseout和mouseenter / mouseleave-都产生相同的结果，这使我得出以下结论：

setTimeout（hideTooltip（），2000）;

是不正确的。

在mouseleave事件中放置警报可确保我正在调用该代码。

我是否缺少明显的东西？ 如果是这样的话，将非常感谢在正确方向上的指针。

Answer 1

更改

option_hide_timeout = setTimeout(hideTooltip(), 2000); 

至

option_hide_timeout = setTimeout(hideTooltip, 2000); 

添加的括号使函数立即被调用，而不是被赋予setTimeout 。

Answer 2

我似乎已经解决了自己的问题。

$(".option").mouseleave(function () {
    option_hide_timeout = setTimeout(hideTooltip(), 2000); // delay the hiding to allow the mouse to enter the tooltip
});

应该：

$(".option").mouseleave(function () {
    option_hide_timeout = setTimeout(function () { hideTooltip() }, 2000);
});

这非常简单，我应该在发布之前就意识到这一点。