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 tips提示框组件实现代码
Nov 19 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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/07/28 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
python安装numpy&安装matplotlib& scipy的教程
2017/11/02 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
Python发展史及网络爬虫
2019/06/19 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Python如何实现定时器功能
2020/05/28 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
群胜软件Java笔试题
2012/09/29 面试题
SQL Server数据库笔试题和答案
2016/02/04 面试题
优秀民警事迹材料
2014/01/29 职场文书
民主生活会发言材料
2014/10/20 职场文书
违纪检讨书范文
2015/01/27 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
2015暑假社会调查报告
2015/07/13 职场文书