Tippy.js是一款轻量级的纯js tooltip工具提示插件。该tooltip插件功能强大，提供多种动画效果和主题效果，并允许用户自定义tooltip主题和使用html代码作为tooltip的模板。
|
使用方法
在页面中引入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
}
})
|