开发者社区> 楚广明> 正文

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

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

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

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

Qtip2 

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

超棒的javascript工具提示条类库大全

Tipped 

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

超棒的javascript工具提示条类库大全

jQuery Tools: Tooltip

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

超棒的javascript工具提示条类库大全

Opentip

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

超棒的javascript工具提示条类库大全

Tooltip

可能是用的比较早也使用比较多的免费jQuery插件。 

超棒的javascript工具提示条类库大全

Coda Popup Bubbles

最早实际是一个教程,帮助你创建一个Coda(coda是Mac机器上的一个web开发工具,相信做过Mac上设计的朋友都知道)风格的工具提示。

超棒的javascript工具提示条类库大全

Javascript Tooltip

超简单有效的一个工具条提示。 可以定义位置,允许内嵌图片。支持不同的事件

超棒的javascript工具提示条类库大全

SkinnyTip JavaScript Tooltip

不是很好看,但是非常轻量级。如果你是简单使用的话,可以选择它。

超棒的javascript工具提示条类库大全

BeautyTips

一个简单实用使用canvas来生成工具条的插件。可能兼容性就稍稍差点儿。

超棒的javascript工具提示条类库大全

Simple tooltips

正如它的名字,一个超简单的工具提示, 它是上面提到的Qtip的原型。

超棒的javascript工具提示条类库大全

Tooltipster

这个插件在过去我们的文章中曾经介绍,使用现代浏览器的HTML5技术,并且支持验证功能。

超棒的javascript工具提示条类库大全

TipTip jQuery Plugin 

这也是一个超迷你的jQuery插件,才3.5kb大小。 超轻量级,效果也很不错。

超棒的javascript工具提示条类库大全

Tooltipsy

一个javascript实现的工具条提示,你可以使用CSS定义样式,动画等等。 

超棒的javascript工具提示条类库大全

Tipsy

Tipsy帮助你创建超小有型的工具条提示。包含了所有你需要的特性,定位,淡入淡出等。

超棒的javascript工具提示条类库大全

响应式的手机工具提示

这个工具条能够支持响应式的设计,你可以在手机上很好的浏览效果。

超棒的javascript工具提示条类库大全

aToolTip

允许你的工具提示跟随你的鼠标,非常轻量级4kb,支持回调方法。

超棒的javascript工具提示条类库大全

Colortip

这个教程帮助你一步一步学习如何开发一个jQuery插件,当然附属产品就是一个工具提示条

超棒的javascript工具提示条类库大全

ChillTip

一个非常灵活的工具条,能够让你使用不同的方式来实现。你可以使用不同的元素来生成,支持6个自定义颜色。

超棒的javascript工具提示条类库大全

Pop!

实际上是一个弹出式的菜单,当然,也可以作为工具提示的一个实现 

超棒的javascript工具提示条类库大全

Easiest Tooltip

一个超简单的jQuery代码片段,帮助你最简单实现的tooltip

超棒的javascript工具提示条类库大全

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

 

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
56个JavaScript 实用工具函数(下)
56个JavaScript 实用工具函数
94 0
56个JavaScript 实用工具函数(中)
56个JavaScript 实用工具函数
106 0
56个JavaScript 实用工具函数(上)
56个JavaScript 实用工具函数
56 0
前端学习案例1-原生js的argument之1
前端学习案例1-原生js的argument之1
4 0
js基础学习
JavaScript 是一门跨平台、面向对象的脚本语言,它能使网页可交互(例如拥有复杂的动画,可点击的按钮,通俗的菜单等)。另外还有高级的服务端 Javascript 版本,例如 Node.js,它可以让你在网页上添加更多功能,不仅仅是下载文件(例如在多台电脑之间的协同合作)。在宿主环境(例如 web 浏览器)中,JavaScript 能够通过其所连接的环境提供的编程接口进行控制。
32 0
《从案例中学习JavaScript》之实现对话效果(二)
《从案例中学习JavaScript》之实现对话效果(二)
16 0
《从案例中学习JavaScript》之实现对话效果(一)
今天突发奇想,js能不能通过字符串和定时器来实现游戏中的对话效果呢。试了一下,还真挺好玩的。 上效果图:
14 0
《从案例中学习JavaScript》之实现网页版阅读器
《从案例中学习JavaScript》之实现网页版阅读器
18 0
Javascript标准内置对象Promise使用学习总结
Javascript标准内置对象Promise使用学习总结
21 0
学习JavaScript笔记
学习JavaScript笔记
20 0
+关注
楚广明
10年导入咨询顾问经验,敏捷中国 第一届中国高峰会讲员,行业实施:中国移动、中华联合保险、中国民航信息 ANZ 澳新银行、戴姆勒奔驰汽车、广州证券、浦发银行、爱德万测试、蔚来汽车、清华大学、努比亚、顺丰速运、迅雷、时趣互动......等企业 Atlassian 敏捷项目
文章
问答
视频
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
在 IoT 设备进行 JavaScript 开发的探索之路
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多