当前位置: > > > tippy.js - 好用的tooltip提示插件使用详解1(安装配置、基本用法、触发方式)

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

一、介绍与安装

1,基本介绍

(1)tippy.js 是一款轻量的 tooltip 插件,使用它可以很方便地实现鼠标悬停提示信息效果。
(2)tippy.js 使用简单,扩展性好,提供多种动画效果和主题效果,并允许用户自定义 tooltip 主题和使用 html 代码作为 tooltip 的模板。

2,安装配置

(1)首先将最新的 tippy.all.jstippy.css 这两个文件下载到本地。

(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();
评论0