使用方法
在页面中引入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所有可用的配置参数如下：
事件
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 :/atomiks/tippyjs
