Question

我想实现一个浮动信息弹出窗口（或如何调用它），当光标位于元素上并且与光标保持固定距离时出现。例如，更像是在这里的东西：

http://www.nytimes.com/interactive/2008/09/15/business/20080916-treemap-graphic.html

说，我有100个div，我希望弹出窗口出现。我想过以两种方式做这件事：

对于每个div，在HTML代码中我有一个隐藏的弹出式div，在mousemove我显示它，移动到光标的位置，然后在mouseleave我隐藏它。每个div都有mousemove（x100）和mouseenter事件绑定（x100）。
我在页面的主要区域有一个mousemove，mouseenter上的每个div和mouseleave我显示/隐藏弹出窗口。每个div（x100）都有一个mousemove（x1）和mouseenter + mouseleave。

我的问题是：

这是方法吗？或者有一些更好的jQuery机制可供使用？
当我有一个mousemove和100个mousemove回调时，效果有什么不同吗？

Answer 1

浮动信息弹出窗口（或如何调用它）

这些被称为工具提示（这些有many个javascript / jQuery插件）

关于滚动自己，你似乎已经弄明白了，你需要为div创建mouseover / mousemove / mouseout个事件。使用jQuery，这看起来像：

var $tooltip = $('#tooltip'), // reusable jQuery obj
    offset = {x: 20, y: 20}; // tooltip offset from the cursor

$('#container div').mouseover(function() { // over
    $tooltip.show()
}).mousemove(function(e) { // move
    // set the positioning with offset
    $tooltip.css({left: e.pageX + offset.x, top: e.pageY + offset.y}) 
    // set the tooltip HTML contents
    $tooltip.html('[your content]');
}).mouseout(function() { // out
    $tooltip.hide();
});

example jsfiddle

至于表现：jsperf - mousemove parent vs children

在容器上设置mousemove事件确实表明在上述测试用例中操作速度更快/秒，但在实际使用中，您不太可能注意到差异。

这是一个仅设置容器的mousemove事件的示例

example jsfiddle #2

Answer 2

您是否考虑过像qTip这样的jquery使用premaid插件？ http://craigsworks.com/projects/qtip2/download

jQuery：以最优雅，最有效的方式浮动信息弹出窗口

2 个答案: