我有一个在另一个元素的鼠标悬停事件上出现的工具提示(它只是一个 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 事件中放置警报可以确保我正在调用代码。
我错过了一些明显的东西吗?如果是这样,将不胜感激指向正确方向的指针。