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

Posted 2023-02-16

【中文标题】鼠标停止时如何显示气球工具提示

【英文标题】：How to Show Ballon tooltip when mouse stops

【发布时间】：2010-09-15 13:31:34

【问题描述】：

[编辑] 所以我使用了下面建议的 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') 为 null 我错过了什么......？？

[/编辑]

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

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

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

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

【参考方案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);
    ;
)();

【参考方案2】：

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

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

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

如果您确实尝试 hoverIntent，我在缩小版本没有触发“out”事件时遇到了一些问题，所以我建议使用完整的、未缩小的源。

【参考方案3】：

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

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

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

【参考方案4】：

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

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