推荐一款前端轻量级的toolTip插件-Tippy.js
安利一款轻量的tooltip插件,使用简单,扩展性好,而且作者一直都有更新维护,用在项目中最好不过了。
官方GitHub : https://github.com/atomiks/tippyjs
CSDN下载插件: http://download.csdn.net/download/qq_25835645/10147435
简要教程(如下) :
安装
可以通过npm来安装在Tippy.js插件。
npm install --save tippy.js
|
使用方法
在页面中引入tippy.js和tippy.css文件。
< link rel = "stylesheet" href = "css/tippy.css" >
< script src = 'path/to/tippy.js' ></ script >
|
HTML结构
你需要为使用tooltip的元素设置一个title
属性,这个属性中的内容就是tooltip的内容。
< button class = "btn tippy" title = "I'm a tooltip!" >tooltip测试</ button >
|
初始化插件
在页面DOM元素加载完毕之后,通过new Tippy()
方法来实例化tooltip。
new Tippy( '.tippy' )
|
一个完整的使用tippy.js的HTML文档的结构如下:
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href = "tippy.css" >
</ head >
< body >
< button id = "myId" title = "Tooltip text" >Button text</ button >
< script src = "tippy.js" ></ script >
< script >
new Tippy('#myId')
</ script >
</ body >
</ html >
|
配置参数
你可以在实例化Tippy
对象时以对象的方式传入配置参数,例如:
new Tippy( '.tippy' , { position: 'right' , animation: 'fade' })
|
也可以在HTML中直接以data-*
的方式来使用配置参数:
< button class = "btn tippy" title = "I'm a tooltip!"
data-animatefill = "false"
data-animation = "scale"
data-position = "bottom" >Overridden</ button >
|
Tippy.js所有可用的配置参数如下:
参数 | 默认值 | 可选值 | 描述 |
position | 'top' | 'top' 'bottom' 'left' 'right' | 指定tooltip出现的位置。 |
trigger | 'mouseenter focus' | 'mouseenter' 'focus' 'click' 'manual' | 指定触发tooltip的事件。 |
interactive | false | true false | toltip是否可互动。 |
delay | 0 | >=0的整数 | 指定多少毫秒之后才显示tooltip。 |
animation | 'shift' | 'shift' 'perspective' 'fade' 'scale' 'none' | 指定tooltip的动画类型。 |
arrow | false | true false | 是否在tooltip上显示箭头。 |
animateFill | true | true false | 添加material design风格的动画。如果arrow设置为true,该选项无效。 |
duration | 400 | >=0的整数 | tooltip的持续动画时间。 |
html | false | false或模板的id | 是否允许在tooltip中显示html模板内容。 |
theme | 'dark' | 'dark' 'light' | tooltip的主题。 |
offset | 0 | 任何数值 | tooltip的偏移值,单位像素。 |
hideOnClick | true | true false | 指定是否在悬停后单击其元素时隐藏tooltip。 |
事件
Tippy.js提供了4个可用的回调函数:
new Tippy( '.tippy' , {
beforeShown: function () {
// When the tooltip has been triggered and has started to transition in
},
shown: function () {
// When the tooltip has fully transitioned in and is showing
},
beforeHidden: function () {
// When the tooltip has begun to transition out
},
hidden: function () {
// When the tooltip has fully transitioned out and is hidden
}
})
|
推荐一款前端轻量级的toolTip插件-Tippy.js相关推荐
- html树插件,推荐8款jQuery轻量级树形Tree插件
由于其拥有庞大,实用的插件库,使得jQuery变得越来越流行.今天将介绍一些最好的jQuery树形视图插件,具有扩展和可折叠的树视图.这些都是轻量级的,灵活的jQuery插件,它将一个无序列表转换为可 ...
- 推荐 25 个优雅的 jQuery Tooltip 插件
jQuery 工具提示可以让网站上一些小的帮助信息显示更加直观,提升用户的体验.下面我们为你推荐 25 个最好的工具提示插件: 1. jqTooltip jqTooltip 2. Pop! Simpl ...
- 推荐几款开发常用的小插件
推荐几款开发常用的小插件 1. uTools软件 # uTools 是什么? uTools 是一个极简.插件化.跨平台的现代桌面软件.通过自由选配丰富的插件,打造你得心应手的工具集合. 通过快捷键(默 ...
- 推荐 5 款私藏的优质 Chrome 插件(3)
点击上方"AirPython",选择"加为星标" 第一时间关注 Python 技术干货! 大家好,我是安果! 今天继续为大家推荐 5 个优质且好用的 Chrom ...
- 推荐 5 款私藏的优质 Chrome 插件(2)
点击上方"AirPython",选择"加为星标" 第一时间关注 Python 技术干货! 大家好,我是安果! 今天继续为大家推荐 5 个优质且好用的 Chrom ...
- 推荐10款非常有用的 Ajax 插件
这篇文章与大家分享的是10款非常有用的 Ajax 插件,有用于图片的,用于分页的,还有用于导航的.这些作者的想法特别新颖,希望你能从中找到自己需要的插件. 1. AJAX-ZOOM 非常强大的一款插件 ...
- idea中摸鱼插件_推荐几款我常用的IDEA插件~网友:妈耶~飞起来咯!
哈喽,各位新来的小伙伴们,大家好!由于公众号做了改版,为了保证公众号的资源能准时推送到你手里,大家记得将咱们的公众号加星标置顶,在此真诚的表示感谢~ 正文如下: 从事开发工作的读者们肯定都知道'IDE ...
- 强烈推荐 10 款珍藏的 Chrome 浏览器插件
Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间,不少人开始推荐 Chrome 浏览 ...
- 给大家推荐一款高大上的代码高亮插件(sublime,github风格)——highlight.js
经常在一些大神博客里面看到非常好看的高亮代码,有sublime风格,GitHub风格等等.毫无疑问,好的高亮代码插件可以不仅仅让你的博文显得更高大上,更重要的是舒适的阅读体验.经过我在网上的一番搜罗, ...
- 5款实用的jQuery验证码插件(附js,jQuery代码)
5款实用的jQuery验证码插件 5款实用的jQuery验证码插件分享给大家,分别有普通字母数字验证码.运算验证码.滑动验证码.点选验证码,纯前端的网页验证码代码. 在线演示地址:5款实用的jQuer ...
最新文章
- 全网最全最详细的Windows下安装Anaconda2 / Anaconda3(图文详解)
- 源码分析-GLSurfaceView的内部实现
- MATLAB从入门到精通-控制系统动态特性的计算以及阶跃响应波德图等
- arm 编译安装mysql5.5_ARM64架构下面安装mysql5.7.22
- Matlab中的类(Class),Matlab中的class用法
- RHEL(Red Hat Enterprise Linux)配置YUM源
- django-静态文件设置
- APP 控制 ROS 机器人 群组
- 罗永浩直播首秀将开卖小米10,网友:一时不知该说谁牛X!
- 9-Springboot任务管理
- [Android ] linux命令英文缩写的含义(方便记忆)
- jQuery插件之ajaxFileUpload异步上传
- Power Shell08当你远程运行powershell指令(不需要管理员权限)
- 设计模式:责任链模式
- matlab插值拟合案例,matlab插值与拟合
- 文本溢出隐藏显示...和英文换行
- python expend_Python序列化proto中repeated修饰的数据
- js判断浏览器类型,判断ie内核,webkit
- 【ABAP系列】SAP ABAP smartforms设备类型CNSAPWIN不支持页格式ZXXX
- Latex排版论文常见问题