Question

我正在使用©Dynamic Drive DHTML代码库中的酷DHTML工具提示脚本。我用这个脚本来显示我所做的工具提示。

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

当鼠标输入 div时，我将变量设置为true，然后启动SetTimeout为0.5秒。
在0.5秒的延迟之后，我验证变量是否仍然设置为True，如果是，我会显示工具提示。
如果我离开div ，我会将变量设置为False。因此，如果您离开div，工具提示将不会显示。

代码：

1 * ：

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

    }
}, 500);

2 * ：

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

}

3 * ：

ifenter = false;

这是jsFiddle。

问题是在0.5秒后，只有移动鼠标时才会显示工具提示。

我试图找到一个解决方案，但我找不到任何修复方法。

Answer 1

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

我用这种方式更新你的小提琴并且它有效。注意我最后在代码中挂了事件处理程序。

http://jsfiddle.net/gamealchemist/jKyPs/15/

var thetitle = 'test title' , thetext =' test text';

function ShowHint(e) {

 //... same code to handle useless browsers ...

 setTimeout(function () {
    if (ifenter == true) {
        enabletip = true;
                    positiontip ( { pageX : e.pageX, pageY : e.pageY } );
                } 
            }, 500);

Answer 2

这样做的一种方法可能是使用这种逻辑 -

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
}

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

2 个答案: