大家在网站开发和设计过程中,往往需要提示用户某些功能或者相关消息,而HTML自带的title属性又往往不够强大,经常需要我们自己去开发相关的工具提示条功能。为了帮助大家更好的开发相关的工具提示条功能,这里我们收集了一套超棒的javascript和javascript类库,如果你不清楚如何选择这些类库的话,请关注我们的“web前端最佳实践”系列中的tooltip工具条选择。希望大家喜欢!
Qtip2
可能大家都听说过Qtip,不过这个jQuery插件已经不再维护和开发,取而代之的是Qtip2,这个工具条提示个人认为是最强大的实现类库,几乎帮助你考虑了所有你开发中需要处理的情况,而且支持自定义主题,并且内建了主题可供选择,你可以定义工具条出现的不同位置,及其相对于window能够自动调整显示位置。文档和在线演示都非常完整,非常方便大家开发。而且拥有高级特性,唯一的问题是提供的方法比较多,比较复杂,如果深度开发会感觉比较难于使用,但是功能绝对是非常强大。IE浏览器支持IE6 +
Tipped
tipped是一个款超多选项的工具条提示插件,支持自定义皮肤,位置,完整的文档和演示。如果你需要一个能够提供强大功能支持的工具提示,它将也是个不错的选择。提供的皮肤和UI可能是最漂亮的,当然也支持自定义,不过美中不足的是,需要你付费,而且即使是非商业使用,也需要支付一笔小小的费用,不过如果你需要这些功能的话,绝对是物有所值的。IE浏览器支持IE6+。
jQuery Tools: Tooltip
jQuery Tools这套类库是套比较老牌的UI类库,自然包含在内的tooltip也是非常值得大家使用的。
Opentip
这是一款免费的工具提示jquery插件,拥有很多的选项,你可以做很多的事情。 不过支持的IE浏览器 需要 IE 7 +。
Tooltip
可能是用的比较早也使用比较多的免费jQuery插件。
Coda Popup Bubbles
最早实际是一个教程,帮助你创建一个Coda(coda是Mac机器上的一个web开发工具,相信做过Mac上设计的朋友都知道)风格的工具提示。
Javascript Tooltip
超简单有效的一个工具条提示。 可以定义位置,允许内嵌图片。支持不同的事件
SkinnyTip JavaScript Tooltip
不是很好看,但是非常轻量级。如果你是简单使用的话,可以选择它。
BeautyTips
一个简单实用使用canvas来生成工具条的插件。可能兼容性就稍稍差点儿。
Simple tooltips
正如它的名字,一个超简单的工具提示, 它是上面提到的Qtip的原型。
Tooltipster
这个插件在过去我们的文章中曾经介绍,使用现代浏览器的HTML5技术,并且支持验证功能。
TipTip jQuery Plugin
这也是一个超迷你的jQuery插件,才3.5kb大小。 超轻量级,效果也很不错。
Tooltipsy
一个javascript实现的工具条提示,你可以使用CSS定义样式,动画等等。
Tipsy
Tipsy帮助你创建超小有型的工具条提示。包含了所有你需要的特性,定位,淡入淡出等。
响应式的手机工具提示
这个工具条能够支持响应式的设计,你可以在手机上很好的浏览效果。
aToolTip
允许你的工具提示跟随你的鼠标,非常轻量级4kb,支持回调方法。
Colortip
这个教程帮助你一步一步学习如何开发一个jQuery插件,当然附属产品就是一个工具提示条
ChillTip
一个非常灵活的工具条,能够让你使用不同的方式来实现。你可以使用不同的元素来生成,支持6个自定义颜色。
Pop!
实际上是一个弹出式的菜单,当然,也可以作为工具提示的一个实现
Easiest Tooltip
一个超简单的jQuery代码片段,帮助你最简单实现的tooltip
以上使我们收集的20个超棒的工具条提示,如果你有其它的js工具条提示类库,请与我们分享。希望大家喜欢我们提供的这套工具条提示类库!