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 伪数组实现方法
Oct 11 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
Angular短信模板校验代码
Sep 23 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缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
php xhprof使用实例详解
2019/04/15 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
python基于右递归解决八皇后问题的方法
2015/05/25 Python
python @property的用法及含义全面解析
2018/02/01 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
使用tensorflow实现线性svm
2018/09/07 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
kali中python版本的切换方法
2019/07/11 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
医疗专业毕业生求职信
2014/08/28 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
小学班主任事迹材料
2014/12/17 职场文书
师德先进个人材料
2014/12/20 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
古诗之感恩老师
2019/10/24 职场文书
python中mongodb包操作数据库
2022/04/19 Python