超棒的20款javascript工具提示条(tooltips)类库

朱雀 2022-05-09 02:33 195阅读 0赞

日期：2012-12-13  来源：[GBin1.com][]

[![超棒的20款javascript工具提示条(tooltips)类库][20_javascript_tooltips]][20_javascript_tooltips_20_javascript_tooltips]

大家在网站开发和设计过程中，往往需要提示用户某些功能或者相关消息，而HTML自带的title属性又往往不够强大，经常需要我们自己去开发相关的工具提示条功能。为了帮助大家更好的开发相关的工具提示条功能，这里我们收集了一套超棒的[javascript][]和[javascript][javascript 1]类库，如果你不清楚如何选择这些类库的话，请关注我们的[“web前端最佳实践”系列][web]中的[tooltip工具条选择][tooltip]。希望大家喜欢！

## [Qtip2 ][Qtip2] ##

可能大家都听说过Qtip，不过这个jQuery插件已经不再维护和开发，取而代之的是Qtip2，这个工具条提示个人认为是最强大的实现类库，几乎帮助你考虑了所有你开发中需要处理的情况，而且支持自定义主题，并且内建了主题可供选择，你可以定义工具条出现的不同位置，及其相对于window能够自动调整显示位置。文档和在线演示都非常完整，非常方便大家开发。而且拥有高级特性，唯一的问题是提供的方法比较多，比较复杂，如果深度开发会感觉比较难于使用，但是功能绝对是非常强大。IE浏览器支持IE6 +

[![超棒的javascript工具提示条类库大全][javascript 2]][20_javascript_tooltips_20_javascript_tooltips]

## [Tipped][]     ##

tipped是一个款超多选项的工具条提示插件，支持自定义皮肤，位置，完整的文档和演示。如果你需要一个能够提供强大功能支持的工具提示，它将也是个不错的选择。提供的皮肤和UI可能是最漂亮的，当然也支持自定义，不过美中不足的是，需要你付费，而且即使是非商业使用，也需要支付一笔小小的费用，不过如果你需要这些功能的话，绝对是物有所值的。IE浏览器支持IE6+。

![超棒的javascript工具提示条类库大全][javascript 3]

## [jQuery Tools: Tooltip][jQuery Tools_ Tooltip] ##

jQuery Tools这套类库是套比较老牌的UI类库，自然包含在内的tooltip也是非常值得大家使用的。

![超棒的javascript工具提示条类库大全][javascript 4]

## [Opentip][] ##

这是一款免费的工具提示jquery插件，拥有很多的选项，你可以做很多的事情。 不过支持的IE浏览器 需要 IE 7 +。

![超棒的javascript工具提示条类库大全][javascript 5]

.......

以上使我们收集的20个超棒的工具条提示，如果你有其它的js工具条提示类库，请与我们分享。希望大家喜欢我们提供的这套工具条提示类库！

来源：[超棒的20款javascript工具提示条(tooltips)类库][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/javascript/20121213-javascript-tooltips/
[20_javascript_tooltips]: http://www.gbin1.com/technology/javascript/20121213-javascript-tooltips/title.jpg
[20_javascript_tooltips_20_javascript_tooltips]: http://www.gbin1.com/technology/javascript/20121213-javascript-tooltips/index.html
[javascript]: http://www.gbin1.com/bloghome.html?tag=javascript
[javascript 1]: http://www.gbin1.com/bloghome.html?tag=jQuery
[web]: http://www.gbin1.com/gb/tag/usertag/143.htm
[tooltip]: http://www.gbin1.com/gb/share/84.htm
[Qtip2]: http://craigsworks.com/projects/qtip2/
[javascript 2]: http://www.gbin1.com/technology/javascript/20121213-javascript-tooltips/1.jpg
[Tipped]: http://projects.nickstakenburg.com/tipped
[javascript 3]: http://www.gbin1.com/technology/javascript/20121213-javascript-tooltips/2.jpg
[jQuery Tools_ Tooltip]: http://jquerytools.org/
[javascript 4]: http://www.gbin1.com/technology/javascript/20121213-javascript-tooltips/3.jpg
[Opentip]: http://www.opentip.org/
[javascript 5]: http://www.gbin1.com/technology/javascript/20121213-javascript-tooltips/4.jpg