寻找像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。