0

我有一个在另一个元素的鼠标悬停事件上出现的工具提示（它只是一个 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 - 两者都产生相同的结果，这让我得出以下结论：

设置超时（隐藏工具提示（），2000）；

是不正确的。

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

我错过了一些明显的东西吗？如果是这样，将不胜感激指向正确方向的指针。

4

2 回答 2

7

改变

option_hide_timeout = setTimeout(hideTooltip(), 2000);

到

option_hide_timeout = setTimeout(hideTooltip, 2000);

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

于 2013-10-23T17:31:31.117 回答
0

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

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

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

于 2013-10-23T17:35:47.120 回答