超棒的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)类库

目录
相关文章
|
2月前
|
数据可视化 前端开发 JavaScript
可视化工具D3.js
可视化工具D3.js
104 2
|
22天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
138 9
|
24天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
60 10
|
1月前
|
存储 JavaScript 前端开发
Node.js 常用工具
10月更文挑战第6天
25 2
|
1月前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
|
1月前
|
JavaScript 网络协议
Node.js 工具模块
10月更文挑战第7天
20 0
|
2月前
|
JavaScript Linux 开发者
一个用于管理多个 Node.js 版本的安装和切换开源工具
【9月更文挑战第14天】nvm(Node Version Manager)是一个开源工具,用于便捷地管理多个 Node.js 版本。其特点包括:版本安装便捷,支持 LTS 和最新版本;版本切换简单,不影响开发流程;多平台支持,包括 Windows、macOS 和 Linux;社区活跃,持续更新。通过 nvm,开发者可以轻松安装、切换和管理不同项目的 Node.js 版本,提高开发效率。
|
1月前
|
数据可视化 前端开发 JavaScript
可视化工具D3.js
可视化工具D3.js
|
2月前
|
C++
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
|
4月前
|
JavaScript 数据安全/隐私保护
node.js 命令行的命令注册和配置工具(最新版) commander.js 实用教程(含自研脚手架的创建流程)
node.js 命令行的命令注册和配置工具(最新版) commander.js 实用教程(含自研脚手架的创建流程)
183 0
下一篇
无影云桌面