tippy.js - 好用的tooltip提示插件使用详解1（安装配置、基本用法、触发方式）

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

一、介绍与安装

1，基本介绍

（1）tippy.js 是一款轻量的 tooltip 插件，使用它可以很方便地实现鼠标悬停提示信息效果。

GitHub 主页：https://github.com/atomiks/tippyjs
官网地址：https://atomiks.github.io/tippyjs/

（2）tippy.js 使用简单，扩展性好，提供多种动画效果和主题效果，并允许用户自定义 tooltip 主题和使用 html 代码作为 tooltip 的模板。

2，安装配置

（1）首先将最新的 tippy.all.js 和 tippy.css 这两个文件下载到本地。

地址：https://unpkg.com/tippy.js/dist/

（2）然后在页面中将它们引入进来即可：

<link rel="stylesheet"href="tippy.css">
<script src='tippy.all.js'></script>

二、基本用法

1，在标签上设置提示文字，并自动初始化

（1）我们可以对任何需要显示 tooltip 的元素标签上使用 data-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:70px">
    <button data-tippy="欢迎访问hangge.com!">自动触发</button>
  </body>
</html>

（2）效果图

当鼠标移动到按钮上时，按钮上方会自动显示出提示信息。
当鼠标移出时，提示信息又会自动消失。
在提示信息显示、隐藏过程中，还会有淡入淡出的效果。

2，使用 js 设置文字，并初始化

（1）我们也可以 tippy() 方法对指定元素设置提示文字。同样的，设置后当鼠标移动到该元素上方时会显示提示信息。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet"href="tippy.css">
    <script src='tippy.all.js'></script>
  </head>
  <script type="text/javascript">
    function btnClick(){
      tippy('#input1', { content: "欢迎访问hangge.com!" })
    }
  </script>
  <body style="padding:70px">
    <button onclick="btnClick()">手动设置</button>
    <input id="input1" type="text" name="" value="">
  </body>
</html>

（2）效果图：

默认情况下输入框是没有提示的。
只有点击按钮后，鼠标移到输入框上方才会显示提示信息。

3，仍在标签上设置文字，但使用 js 初始化

（1）我们还可以使用 data-tippy-content 属性设置提示文字。但它和 data-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>
  <script type="text/javascript">
    function btnClick(){
      tippy('input')
    }
  </script>
  <body style="padding:70px">
    <button onclick="btnClick()">手动设置</button><br><br>
    <input type="text" name="" value="" data-tippy-content="用户名不能为空"><br><br>
    <input type="text" name="" value="" data-tippy-content="密码不能为空">
  </body>
</html>

（2）效果图：

默认情况下输入框是没有提示的。
只有点击按钮后，鼠标移到输入框上方才会显示提示信息。而且不同的输入框显示不同的提示文字。

三、触发标签显示的方式

1，支持的触发方式

（1）tippy 提供了如下几种方式用于触发提示标签的显示：

mouseenter：悬停触发
focus：获取焦点时触发
click：点击时触发
manual：手动触发

（2）默认情况下使用的是“mouseenter focus”这个组合。

2，设置触发方式

（1）我们可以直接在元素标签上使用 data-tippy-trigger 属性设置触发方式。比如下面改成点击后才显示提示标签（再次点击标签消失）

注意：可以同时支持多个触发方式，只需将它们用空格隔开即可。比如：data-tippy-trigger="mouseenter focus"

<button data-tippy="欢迎访问hangge.com!"
        data-tippy-trigger="click">tooltip</button>

（2）也可以在使用 js 初始化的时候设置：

tippy('input', {
  content: "欢迎访问hangge.com!",
  trigger: "click"
});

3，手动触发

（1）当我们将触发方式设置为“manual”后，就只能通过 js 来显示出提示标签。首先我们要获取标签实例对象：

var btn = document.getElementById("btn1");
var tip = btn._tippy; //Tippy实例初始化后,自动通过_tippy属性存储在引用元素上

（2）然后调用 tippy 实例对象的 show() 方法即可显示：

tip.show();

（3）提示标签显示后，除了可以点击页面任意位置将其隐藏外，还可以调用 tippy 实例对象的 hide() 方法将其隐藏：

tip.hide();

其他