使用方法
在页面中引入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。
newTippy('.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对象时以对象的方式传入配置参数，例如：
newTippy('.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个可用的回调函数：
newTippy('.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
}
})
官方GitHub : https://github.com/atomiks/tippyjs