Question

我喜欢StackOverflow的悬停效果。

enter image description here

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

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

编辑：这里的印象不太好，我只是希望像stackoverflow一样具有鼠标悬停效果。

Answer 1

动画是可控制的，工具提示是可定制的，你可以像工具提示一样模仿StackOverflow。

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

此外，默认情况下，工具提示会显示元素的title属性。有一个示例：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

通过一点设计，这就是你想要的。

Answer 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的内容仅用于演示用法。您需要为jsbin链接中显示的工具提示内容使用HTML标记，以便使用StackOverflow格式的工具提示。您还需要显示那里显示的所有CSS。

享受：）

更新：现在检查工具提示是否会从窗口边框泄漏出来，并在这些情况下从右侧或底部进行动画处理。

Answer 3

请看一下这个插件。使用此方法可以实现与stackoverflow相同的效果。 click here

Answer 4

使用(link)进行操作。根据需要添加html并自定义css。

Answer 5

您可以像我在jsfiddle http://jsfiddle.net/qJ8NB/1/中制作的演示一样使用.animate

只需在div上添加一些不错的CSS，你就可以看起来像SO。