tippy.js - 好用的tooltip提示插件使用详解3（API方法、回调函数）
九、显示、隐藏回调
1，生命周期函数介绍
tippy 为我们提供了如下几个生命周期回调函数，方便我们在不同阶段中执行相应的业务逻辑：
- onShow：开始显示时调用。如果此时返回 false，则会阻止显示。
- onShown：显示完毕时调用。
- onHide：开始隐藏时调用。如果此时返回 false，则会阻止隐藏。
- onHidden：隐藏完毕时回调。
2，使用样例
（1）效果图
- 页面上添加了两个复选框，勾选后可以分别阻止提示标签的显示或隐藏。
- 同时在每个回调函数中都打印出相关信息，方便观察。
（2）样例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"href="tippy.css">
<script src='tippy.all.js'></script>
</head>
<body style="padding:170px">
<button id="btn1">tooltip</button>
<input id="checkbox1" type="checkbox"/><label for="checkbox1">阻止显示</label>
<input id="checkbox2" type="checkbox"/><label for="checkbox2">阻止隐藏</label>
</body>
<script type="text/javascript">
window.onload=function(){
tippy('#btn1', {
content: "欢迎访问hangge.com!",
onShow(tip) {
console.log("开始显示");
//判断是非需要阻止显示
if(document.getElementById("checkbox1").checked) {
console.log("显示被阻止");
return false;
}
},
onShown(tip) {
console.log("显示结束");
},
onHide(tip) {
console.log("开始隐藏");
//判断是非需要阻止隐藏
if(document.getElementById("checkbox2").checked) {
console.log("隐藏被阻止");
return false;
}
},
onHidden(tip) {
console.log("隐藏结束");
}
})
}
</script>
</html>
十、获取 tip 集合、对象
Tippy 为我们提供了许多 API 方法来对提示标签进行操作和控制，而在使用这些方法前，我们必须先获取到提示标签对象。
1，获取集合
（1）当我们使用 tippy() 方法初始化时，返回的其实是 tipCollection。它是一个普通的对象，它内部属性如下：
{
// Targets that should receive a tippy
targets: '.btn',
// Default props + options merged together
props: { ... },
// Array of all instances that were created
instances: [tip, tip, tip, ...],
// Method to destroy all the tooltips that were created
destroyAll() { ... }
}
（2）特别注意的是 instances 属性中包含有所有创建的 tippy 实例对象。
2，获取实例对象
（1）我们可以遍历集合对象中的 instances 属性数据，来获取所有的实例对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"href="tippy.css">
<script src='tippy.all.js'></script>
</head>
<body style="padding:170px">
<button id="btn1">tooltip</button>
</body>
<script type="text/javascript">
window.onload=function(){
var tipCollection = tippy('#btn1', {
content: "欢迎访问hangge.com!",
})
//遍历所有tooltip实例并自动显示
for (const tip of tipCollection.instances) {
tip.show();
}
}
</script>
</html>
（2）如果仅创建一个实例的话，可以适用 tippy.one() 方法来初始化。它将直接返回这个实例对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"href="tippy.css">
<script src='tippy.all.js'></script>
</head>
<body style="padding:170px">
<button id="btn1">tooltip</button>
</body>
<script type="text/javascript">
window.onload=function(){
var tip = tippy.one('#btn1', {
content: "欢迎访问hangge.com!",
})
//自动显示这个tooltip
tip.show();
}
</script>
</html>
（3）由于 Tippy 实例初始化后，会自动通过 _tippy 属性存储在引用元素上。所有我们也可以通过页面元素来获取对应的实例对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"href="tippy.css">
<script src='tippy.all.js'></script>
</head>
<body style="padding:170px">
<button id="btn1" data-tippy="欢迎访问hangge.com!">tooltip</button>
</body>
<script type="text/javascript">
window.onload=function(){
var btn = document.getElementById("btn1");
var tip = btn._tippy;
//自动显示这个tooltip
tip.show();
}
</script>
</html>
十一、常用的 API 方法
1，显示、隐藏指定 tooltip
//显示tooltip tip.show(); //隐藏tooltip tip.hide();
2，启用、禁用指定 tooltip
//禁用tooltip tip.disable() //启用tooltip tip.enable()
3，销毁指定 tooltip
注意：销毁后，对应页面元素的 _tippy 属性也会自动被删除。
tip.destroy()
4，更新指定 tooltip
//只更新标签内容
tip.setContent('新的内容')
//同时更新多个属性
tip.set({
content: '新的内容',
arrow: true,
duration: 1000,
animation: 'perspective'
})
5，静态方法
下面这些静态方式是全局的，也就是说会对页面所有的 tooltip 生效。
//想要全局捕获单击事件,而不是冒泡,则需先调用该方法
tippy.useCapture()
//隐藏页面上所有的tooltip
tippy.hideAllPoppers()
//禁用动画
tippy.disableAnimations()
//为之后所有新的tippy实例设置默认值
tippy.setDefaults({
arrow: true,
duration: 1000,
animation: 'perspective'
})
