0

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

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

  1. 当鼠标进入div 时，我将一个变量设置为 true，并开始设置 0.5 秒的 SetTimeout。
  2. 延迟0,5 秒后，我验证变量是否仍设置为True，如果是，我显示工具提示。
  3. 如果我离开 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 秒之后，只有在您移动鼠标时才会显示工具提示。

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

4

2 回答 2

3

当你设置 enabletip 为 true 时，它​​对 tooltip 的实际显示没有影响，你需要在之后立即调用 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);
于 2013-09-06T16:09:29.647 回答
-1

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

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
}
于 2013-09-06T16:02:01.227 回答