我喜欢 StackOverflow 的悬停效果。
我想在我的网络应用程序中使用类似的功能。有人可以让我知道吗?这个功能叫什么?有没有可用的图书馆?我使用过jQuery Tooltip,但对它印象不深。
目前我在我的应用程序中使用了 overLib,它已经很老了。
编辑: Impressed 在这里听起来不太好,我只是想要像 stackoverflow 这样的鼠标悬停效果。
我喜欢 StackOverflow 的悬停效果。
我想在我的网络应用程序中使用类似的功能。有人可以让我知道吗?这个功能叫什么?有没有可用的图书馆?我使用过jQuery Tooltip,但对它印象不深。
目前我在我的应用程序中使用了 overLib,它已经很老了。
编辑: Impressed 在这里听起来不太好,我只是想要像 stackoverflow 这样的鼠标悬停效果。
新的 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
http://jsbin.com/anegip/3/edit
只需一点设计,这就是您想要的。
我知道这很旧,但我一直在寻找同样的东西,而且......如果有人想要看起来像StackOverflow的标签工具提示的东西......(你为什么不呢?他们太棒了)
演示:http: //jsbin.com/korehubi/10
代码:http: //jsbin.com/korehubi/10/edit
通过查看 StackOverflow 的代码精心复制。
用法:
<div class="firstElement">The thing to hover over.</div>
<div class="coolTip" id="firstElement">This is the tooltip content.</div>
coolTips()
在页面加载时运行。注意上面例子中tooltip div的内容只是为了演示使用。您需要对工具提示内容使用 HTML 标记,如 jsbin 链接中所示,以便拥有 StackOverflow 格式的工具提示。您还需要那里显示的所有 CSS。
享受 :)
更新:现在检查工具提示是否会从窗口边框泄漏,并在这些情况下从右侧或底部进行动画处理。
请看看这个插件。使用它可以达到与stackoverflow相同的效果。 点击这里
只需使用(link)自己制作即可。根据您的需要添加 html 和自定义 css。
您可以.animate
像我在 jsfiddel http://jsfiddle.net/qJ8NB/1/中制作的这个演示一样使用
只需在 div 上添加一些漂亮的 css,您就可以让它看起来像 SO。