堆栈溢出标签 - 它们如何在鼠标悬停时显示信息？答案

【问题标题】：Stack Overflow tags - How do they display info on mouse over?堆栈溢出标签 - 它们如何在鼠标悬停时显示信息？
【发布时间】：2014-03-10 19:20:28
【问题描述】：

当鼠标悬停在每个 Stack Overflow 标签上时，会在其下方显示一个信息框。只要鼠标悬停在标签或信息框上，它就一直可见。将鼠标移出标签或信息框会导致信息框消失。

如何使用 JQuery 或 JS 实现这一点？请说明从服务器获取标签信息的过程。

更新：

重要的是很难相信它是一个工具提示。因为当标签从其表面失去鼠标指针时，工具提示通常会消失。但是对于 Stack Overflow 工具提示，即使鼠标移到信息区域上，它们也会保持静止。这就是为什么我提出这个问题来澄清这一点。这种类型的定制是如何完成的？

【问题讨论】：

jQuery 有几个工具提示插件：flowplayer.org/tools/tooltip/index.html

标签： javascript jquery tooltip

【解决方案1】：

查看一些用于 jQuery 的工具提示插件。至于工具提示的 HTML 的接收，请看 jQuery 文档中的一些简单的$.ajax 示例。

工具提示

【讨论】：

【解决方案2】：

如果没有更具体的内容，我只能给您大致了解它的工作原理。

鼠标悬停将触发 AJAX 请求（可能在短暂的计时器倒计时之后，以使其保持触发，直到指针在标签上停留很短的时间），该请求会查询有关标签的 SO 数据库。如果返回某种响应，要么是直接注入 DOM 的 HTML 片段，要么是用于填充注入 DOM 的元素的 XML 或 JSON 编码数据块。 mouseout 事件将从 DOM 中删除元素。我想AJAX响应也由管理它的javascript保存在内存缓存中，这样就不会重复请求相同的数据。

【讨论】：

【解决方案3】：

众多 jQuery 工具提示插件之一：

http://jquery.bassistance.de/tooltip/demo/

另外，我认为 SO 使用 AJAX 加载工具提示内的信息，但您不必这样做。

【讨论】：

【解决方案4】：

我会推荐 Tooltip 来做类似的事情。

【讨论】：

【解决方案5】：

为 mouseover DOM 事件添加事件侦听器以显示信息框。向 mouseout 事件添加事件侦听器以隐藏信息框。有关详细信息，请参阅Mouse event types。通过XMLHttpRequest 检索您希望在信息框中显示的信息。

【讨论】：