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 相关文章推荐
图片上传即时显示缩略图的js代码
May 27 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
vue项目中axios使用详解
Feb 07 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
PHP注释实例技巧
2008/10/03 PHP
php curl模拟post请求小实例
2013/11/13 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
PHP会话控制实例分析
2016/12/24 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python迭代用法实例教程
2014/09/08 Python
跟老齐学Python之网站的结构
2014/10/24 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
python实现的生成word文档功能示例
2019/08/23 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
生日宴会答谢词
2014/01/09 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
使用javascript解析二维码的三种方式
2021/11/11 Javascript