寻找像stackoverflow这样的鼠标悬停功能答案

【问题标题】：Looking for a mouseover feature like stackoverflow寻找像stackoverflow这样的鼠标悬停功能
【发布时间】：2012-10-22 22:50:34
【问题描述】：

我喜欢 StackOverflow 的悬停效果。

我想在我的网络应用程序中使用类似的功能。有人可以让我知道吗？这个功能叫什么？有没有可用的图书馆？我用过jQuery Tooltip，但对那个没有印象。

目前我在我的应用程序中使用overLib，它已经很旧了。

编辑： Impressed 在这里听起来不太好，我只是想要像 stackoverflow 这样的鼠标悬停效果。

【问题讨论】：

【解决方案1】：

新的 jQuery UI 工具提示相当不错：http://jqueryui.com/tooltip/#custom-style

动画是可控的，工具提示是样式化的，你几乎可以像工具提示一样模仿 StackOverflow。

请注意，我为您链接了“自定义样式”示例。它向您展示了如何为工具提示制作自定义样式。

此外，默认情况下，工具提示会显示元素的标题属性。有一个示例：http://jqueryui.com/tooltip/#custom-content，其中以不同方式设置自定义内容以向您显示一些选项。

我不确定缺少什么功能。

编辑：示例网站上的自定义内容演示存在错误，请在全页视图中查看：http://view.jqueryui.com/menubar/demos/tooltip/custom-content.html

EDIT2：新解决方案

查看 Anton 的回答，我认为可以通过在原始 div 中添加工具提示的 div 并引入 hoverintent 来正确完成此操作。还需要对代码进行一些清理。查看： http://jsbin.com/anegip/2/edit

只要有一点设计，就是你想要的。

【讨论】：

【解决方案2】：

我知道这是旧的，但我一直在寻找同样的东西，而且......如果有人想要 实际上看起来像 StackOverflow 的标签工具提示的东西......（为什么不你？他们太棒了）

通过 StackOverflow 的代码精心复制。

用法：

<div class="firstElement">The thing to hover over.</div>
<div class="coolTip" id="firstElement">This is the tooltip content.</div>

注意上面例子中tooltip div的内容只是为了演示使用。您需要对工具提示内容使用 HTML 标记，如 jsbin 链接中所示，以获得 StackOverflow 式的格式化工具提示。您还需要那里显示的所有 CSS。

享受:)

更新：现在检查工具提示是否会泄漏到窗口边框之外，并在这些情况下从右侧或底部开始动画。

【讨论】：

【解决方案3】：

请看看这个插件。使用它可以达到与stackoverflow相同的效果。 click here

【讨论】：

【解决方案4】：

只需使用 (link) 即可。根据需要添加html和自定义css。

【讨论】：

【解决方案5】：

你可以使用.animate，就像我在jsfiddel中制作的这个演示http://jsfiddle.net/qJ8NB/1/

只需在 div 上添加一些漂亮的 css，您就可以让它看起来像 SO。

【讨论】：