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

目录
相关文章
|
4月前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
213 4
|
4月前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
36 3
|
3月前
|
存储 JavaScript 前端开发
Node.js 常用工具
Node.js 常用工具
21 1
|
2月前
|
JavaScript 数据安全/隐私保护
node.js 命令行的命令注册和配置工具(最新版) commander.js 实用教程(含自研脚手架的创建流程)
node.js 命令行的命令注册和配置工具(最新版) commander.js 实用教程(含自研脚手架的创建流程)
79 0
|
2月前
|
JavaScript 数据安全/隐私保护 索引
node.js 命令行交互工具(最新版) inquirer.js 实用教程
node.js 命令行交互工具(最新版) inquirer.js 实用教程
110 0
|
2月前
|
移动开发 JavaScript
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
70 0
|
3月前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
28 0
|
3月前
|
JavaScript 网络协议
Node.js 工具模块
Node.js 工具模块
109 0
|
4月前
|
前端开发 JavaScript 开发者
在JavaScript中,回调函数是一种非常强大的工具
【5月更文挑战第10天】JavaScript中的回调函数是异步编程的核心,常用于处理异步操作结果、事件监听、定时任务、数组遍历和转换以及递归调用。例如,`fetchData`函数使用回调处理网络请求的结果,`addEventListener`用于监听事件,`setTimeout`执行延迟任务,`map`则对数组元素进行操作。尽管回调函数可能导致回调地狱和错误处理复杂,但它们依然是理解和掌握JavaScript的关键技能,而Promise和async/await提供了更优的异步解决方案。
28 2
|
4月前
|
JavaScript 前端开发 开发者
Node.js的包管理和npm工具深度解析
【4月更文挑战第30天】本文深入解析Node.js的包管理和npm工具。包管理促进代码复用和社区协作,包包含元数据描述文件`package.json`和入口文件。npm提供搜索、安装、发布等功能,通过命令行进行操作,如`install`、`search`、`uninstall`。npm支持版本控制、全局安装、脚本定义及私有仓库。理解和熟练运用npm能提升Node.js开发效率。