寻找像stackoverflow这样的鼠标hoverfunction

我喜欢StackOverflow的hover效果。

在此处输入图像描述

我想在我的网络应用程序中使用类似的function。 有人可以让我知道吗? 这个function叫什么? 有没有可用的图书馆? 我使用过jQuery Tooltip,但我没有给那个留下深刻的印象。

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

编辑: Impressed在这里听起来不太好, 我只想像stackoverflow一样有鼠标hover效果

我知道这是旧的,但我一直在寻找相同的东西,并且…如果有人想要的东西实际上看起来像StackOverflow的标签工具提示……(为什么不是你?他们真的很棒)

演示: http : //jsbin.com/korehubi/10

代码: http : //jsbin.com/korehubi/10/edit

通过StackOverflow的代码精心复制。

用法:

The thing to hover over.
This is the tooltip content.
  • 将“coolTip”类分配给工具提示div。
  • 同时为其指定一个ID,该ID与您要hover的元素上设置的类相匹配。
  • 在页面加载时运行coolTips()

请注意,上面示例中的tooltip div的内容仅用于演示用法。 您需要为jsbin链接中显示的工具提示内容使用HTML标记,以便使用StackOverflow格式的工具提示。 你还需要那里显示的所有CSS。

请享用 :)

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

新的jQuery UI工具提示非常好: http : //jqueryui.com/tooltip/#custom-style

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

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

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

我不确定缺少什么function。

编辑:自定义内容演示在示例站点上被窃听,在完整页面视图中检查: http : //view.jqueryui.com/menubar/demos/tooltip/custom-content.html

EDIT2: 新解决方案

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

http://jsbin.com/anegip/3/edit

有点设计,这就是你想要的。

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

只需使用(链接)即可 。 根据需要添加html并自定义css。

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

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

这是一个更新 http://jsfiddle.net/qJ8NB/11/