Question

我有另一个元素的mouseover事件时出现的工具提示（只是一个div）。我试图将工具提示隐藏在主元素的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);
});

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

setTimeout触发太快

2 个答案: