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

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（） {"，我得到一个javascript错误document.getElementById（'MyDiv'）为空我错过了什么....？？

[/编辑]

我想当用户鼠标停在元素上超过 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 会快速触发大量事件，并可能对您的网站性能产生严重影响。 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 语法，您可以确定在气球可见后鼠标已移动。