Javascript SetTimeout上的工具提示仅在鼠标移动时显示

我正在使用Dynamic Drive DHTML代码库中的酷DHTML工具提示脚本。我使用此脚本显示我制作的工具提示

考虑到我不想立即显示工具提示，我在脚本中添加了简单的代码：

当鼠标输入div时，我将一个变量设置为true，并启动0,5秒的SetTimeout

延迟0.5秒后，我验证变量是否仍设置为

True

，如果是，我显示工具提示

如果我离开div，我将变量设置为

False

。因此，如果离开div，工具提示将不会显示

代码：

1*：

ifenter = true;
...
setTimeout(function () {
    if (ifenter == true) {
        enabletip = true
    } else {

    }
}, 500);

if (ifenter == true) {
enabletip = true
} else {

}

ifenter = false;

2*：

ifenter = true;
...
setTimeout(function () {
    if (ifenter == true) {
        enabletip = true
    } else {

    }
}, 500);

if (ifenter == true) {
enabletip = true
} else {

}

ifenter = false;

3*：

ifenter = true;
...
setTimeout(function () {
    if (ifenter == true) {
        enabletip = true
    } else {

    }
}, 500);

if (ifenter == true) {
enabletip = true
} else {

}

ifenter = false;

这是我的建议

问题是在0.5秒后，仅当您移动鼠标时，工具提示才会显示

---

我试图找到解决方案，但没有找到解决方案。

一种方法是使用以下逻辑-

var timeoutid=null;
var isShowing = false;
function showTooltip(){
    //show the tooltip code goes here
    isShowing=true;
}

function hideTooltip(){
    //hide tooltip code goes here
    isShowing=false;
}

/* el is the element on which you want a tooltip */
el.onmouseover = function(){
    timeoutid = setTimeout(showTooltip, 500);
}

el.onmouseout = function(){
   clearTimeout(timeoutid);
   if(isShowing)hideTooltip();
}

如果要更新鼠标移动时工具提示的位置-

el.onmousemove = updateTooltipPosition;

function updateTooltipPosition(e){
 // logic to update goes here
}

---

当您将enabletip设置为true时，它对工具提示的实际显示没有影响，您需要在完成显示后立即调用positiontip。
但要获得放置工具提示的坐标，必须“正确”处理鼠标悬停（ShowHint），即以e作为参数以获得当前坐标

我用这种方式更新了你的小提琴，它很管用。注意，我在代码的末尾钩住了事件处理程序

---

谢谢你的建议，但我还得移动鼠标@Vinc P.你刚刚复制了它。这不是一个完整的解决方案，这是一种解决方法。我看不到你的变化，你能给我链接吗？请：）若用户将鼠标快速移出元素，比如说在不到半秒的时间内？你忘了清除超时。刚刚注意到

Vincent Piel

和

Vinc P

的名字非常相似：D@Moazzam汗：使用“iCenter”的测试就是为了解决这个问题。