javascript - 寻找像stackoverflow这样的鼠标悬停功能

Question

我喜欢 StackOverflow 的悬停效果。

在此处输入图像描述

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

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

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

score 3 · Accepted Answer

新的 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：新解决方案

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

只需一点设计，这就是您想要的。

score 2 · Accepted Answer

我知道这很旧，但我一直在寻找同样的东西，而且......如果有人想要看起来像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。

享受：）

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

score 0 · Accepted Answer

0

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

于 2012-11-02T09:37:14.900 回答

score 0 · Accepted Answer

0

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

于 2012-11-02T09:39:50.973 回答

score 0 · Accepted Answer

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

5 回答 5