Stack Overflow标签 - 它们如何在鼠标悬停时显示信息？

Question

如果鼠标悬停在每个Stack Overflow标签上，则会在其下方显示一个信息框。只要鼠标位于标签上方或信息框上方，它就会继续显示。将鼠标移出标签或信息框会导致信息框消失。

如何使用JQuery或JS实现这一目标？请解释从服务器检索标签信息的过程。

更新

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

Answer 1

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

---

<强>工具提示

• 30 Stylish jQuery Tooltip Plugins For Catchy Designs
• 10 Excellent ToolTip Plugins with jQuery

Answer 2

如果不是更具体，我可以给你的是它是如何工作的一般概念。

鼠标悬停将触发一个AJAX请求（可能是在短暂的计时器倒计时之后，为了让它一直触发，直到指针短时间超过标签），向SO数据库查询有问题的标签。如果返回某种响应，可以是直接注入DOM的HTML片段，也可以是用于填充注入DOM的元素的XML或JSON编码数据块。 mouseout事件将从DOM中删除该元素。我认为AJAX响应也由管理它的javascript保存在内存缓存中，以便不会重复请求相同的数据。

Answer 3

我会推荐Tooltip这样的东西。

Answer 4

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