tippy.js - 好用的tooltip提示插件使用详解3（API方法、回调函数）

作者：hangge | 2018-10-18 08:10

九、显示、隐藏回调

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'
})

其他