jQuery带箭头提示框tooltips插件集锦


Posted in Javascript onNovember 17, 2014

摘要:

之前给大家介绍过用CSS来实现带箭头的提示框,今天我们来点不太一样的,本文将分享几款带箭头提示框。

qtip
qTip是一种先进的提示插件,基于jQuery框架。以用户友好,而且功能丰富,qTip为您提供不一般的功能,如圆角和语音气泡提示,并且最重要的是免费。支持ie6+以及其他主流浏览器
jQuery带箭头提示框tooltips插件集锦 

grumble.js
grumble.js提供了特殊的提示,北/东/南/西定位的一般限制。可以围绕一个给定的元素以任意角度旋转,任何距离可以被指定,任何CSS样式可以应用。自动尺寸调整为本地化的文本使用。
jQuery带箭头提示框tooltips插件集锦

cluetip
clueTip插件可以让你轻松展现出奇特的工具提示,当用户的鼠标悬停在(或可选点击)你的脚本中指定的任何元素。如果该元素包含一个title属性,它的文本成为clueTip的标题。
jQuery带箭头提示框tooltips插件集锦

qtip2
qtip2是第二代先进的qTip插件,基于jQuery框架。支持ie6+以及其他主流浏览器。
jQuery带箭头提示框tooltips插件集锦

jtooltip
jQuery-ui提供的tooltip
jQuery带箭头提示框tooltips插件集锦

powertip
powertip采用了非常灵活的设计,易于定制,为您提供了多种不同的方法来使用工具提示,有API的开发人员,并支持添加复杂的数据提示。它正在积极地开发和维护,并提供了非常流畅的用户体验。
jQuery带箭头提示框tooltips插件集锦

colortip
转换元素的标题属性值,变成了一系列丰富多彩的工具提示。六种颜色主题可供选择,让您可以在您的设计的其余部分很容易匹配。
jQuery带箭头提示框tooltips插件集锦tipsy
tipsy是一个jQuery插件,用于创建基于一个锚标记的title属性类似于Facebook的工具提示效果。
jQuery带箭头提示框tooltips插件集锦

jQuery-tooltip

jQuery带箭头提示框tooltips插件集锦floatabels

jQuery带箭头提示框tooltips插件集锦Bootstrap

Popover
Popover用于当用户点击任何原件的子元素显示信息。
jQuery带箭头提示框tooltips插件集锦

sweet
sweet工具提示是一个jQuery和CSS3的基础工具提示,不只是一个风格的提示,这种无意象工具提示使用CSS线性渐变,盒阴影,文字阴影制作。
jQuery带箭头提示框tooltips插件集锦

tooltipster
一个强大,灵活的jQuery插件使您能够轻松地创建具有增强CSS的强大的语义,现代化的工具提示。支持ie8+以及其他主流浏览器
jQuery带箭头提示框tooltips插件集锦

darktooltip
一个简单的自定义工具提示与确认方案和效果。
jQuery带箭头提示框tooltips插件集锦

jCallout
易于使用和实施,只有CSS JQuery的实现(无需图像),可自定义的选项。
jQuery带箭头提示框tooltips插件集锦

小结:

在这几款提示插件中,个人最细化的有sweet、tooltipster、grumble。因为他们样式非常的好看。

以上就是这13款带箭头提示插件的介绍了,小伙伴们使用了没呢?有问题给我留言吧

Javascript 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 #Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 #Javascript
node.js中watch机制详解
Nov 17 #Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 #Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 #Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 #Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 #Javascript
You might like
php 获取mysql数据库信息代码
2009/03/12 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
JS高级运动实例分析
2016/12/20 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
详解python中asyncio模块
2018/03/03 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
师范生实习自我鉴定
2013/11/01 职场文书
创新比赛获奖感言
2014/02/13 职场文书
法制报告会主持词
2014/04/02 职场文书
个人党性分析总结
2015/03/05 职场文书