如何在鼠标停止时显示气球工具提示

Question

[编辑] 所以我使用了下面建议的 JavaScript 工具提示之一。 我得到了一些提示，当你停下来时会显示出来，当你移动时会隐藏起来。 唯一的问题是当我这样做时它可以工作：

document.onmousemove = (function() {
    var onmousestop = function() {
        Tip('Click to search here');
        document.getElementById('MyDiv').onmousemove = function() {
        UnTip();
    };
    }, thread;

    return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

但我希望该函数仅适用于特定的 div 并且如果我将第一行更改为 "document.getElementById('MyDiv').onmousemove = (function() {" I收到 javascript 错误 document.getElementById('MyDiv') is null 我缺少什么...？？

[/edit]

当用户鼠标停留在某个元素上超过 1.5 秒时，我想显示气球样式消息 ，如果他们移动鼠标，我想隐藏气球，我会尝试使用我在野外发现的一些 JavaScript 代码，这是我用来检测鼠标何时停止的代码。

document.onmousemove = (function() {
    var onmousestop = function() {
        //code to show the ballon
        };
    }, thread;

    return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

然后 有两个问题，一，有人有一个推荐的轻量级 JavaScript 气球吗，它会显示在光标位置；二，检测鼠标停止的代码工作正常，但我对如何检测鼠标再次开始移动并隐藏气球感到困惑。 。 谢谢...

Answer 1

回答这个问题有点晚了，但这对有需要的人会有帮助。

我需要此函数能够检测鼠标何时停止移动一段时间，以便在将鼠标悬停在视频上时隐藏 HTML/JS 播放器控制器。 这是工具提示的修订代码：

document.getElementById('MyDiv').onmousemove = (function() {
    var onmousestop = function() {
        Tip('Click to search here');
    }, thread;

    return function() {
        UnTip();
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

在我的例子中，我使用了一些 jQuery 来为我的播放器控制器选择元素：

$('div.video')[0].onmousemove = (function() {
    var onmousestop = function() {
        $('div.controls').fadeOut('fast');
    }, thread;

    return function() {
        $('div.controls').fadeIn('fast');
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

Answer 2

jQuery 插件 hoverIntent 提供了类似的行为。 它通过检查用户是否减慢鼠标移入元素并在元素上悬停一定时间来确定用户是否“打算”悬停在特定元素上。

它仅在用户离开元素时触发“out”事件，这听起来并不完全像您正在寻找的那样，但代码非常简单。

当您不需要收集事件时，还要注意将事件绑定到 mousemove，mousemove 会快速触发大量事件，并且可能会对您的站点性能产生严重影响。 hrefIntent 仅在光标进入活动元素时绑定 mousemove，然后解除绑定。

如果你尝试hoverIntent，我在缩小版本不触发“out”事件方面遇到了一些麻烦，所以我建议使用完整的、未缩小的源代码。

Answer 3

这是一个漂亮的 jQuery 插件，用于提供漂亮的浮动工具提示。

http://jqueryfordesigners.com/demo/coda-bubble.html

[编辑]
我想如果没有看到配套的 HTML，很难说出了什么问题。 我会仔细检查该元素是否具有标记中指定的适当 ID。 除此之外，除非这是一项学术练习，否则我建议使用类似我上面提到的 jQuery 插件之类的东西。 当然还有许多其他类似的预构建工具已经可以处理您当前正在解决的所有细节。

Answer 4

document.onmousemove = (function() {
  if($('balloon').visible) {
  //mouse is moving again
}....//your code follows

使用 Prototype.js 语法，一旦气球可见，您就可以确定鼠标已移动。