tippy.js - 好用的tooltip提示插件使用详解2（常用的样式、动画设置）

2018-10-16 发布：hangge 阅读：3845

四、形状样式设置

1，显示箭头

（1）我们可以直接在元素标签上使用 data-tippy-arrow 属性设置显示箭头：

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

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

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

2，箭头圆角

（1）使用 arrowType 属性可以设置箭头形状。默认为 sharp（尖角），我们可以将其设置为 round（圆角）：

（2）我们可以直接在元素标签上使用 data-tippy-arrowType 属性设置：

<button data-tippy="欢迎访问hangge.com!"
        data-tippy-arrow="true"
        data-tippy-arrowType="round">tooltip</button>

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

tippy('input', {
  content: "欢迎访问hangge.com!",
  arrow: true,
  arrowType: 'round'
});

3，箭头大小

（1）使用 arrowTransform 属性可以改变箭头的大小，我们可以对箭头整体进行缩放，也可以只在横向、或者纵向上进行缩放：

（2）我们可以直接在元素标签上使用 data-tippy-arrowTransform 属性设置：

<button data-tippy="欢迎访问hangge.com!"
        data-tippy-arrow="true"
        data-tippy-arrowTransform="scaleX(2)">scaleX(2)</button>

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

tippy('input', {
 content: "欢迎访问hangge.com!",
 arrow: true,
 arrowTransform: 'scale(0.7)'
});

4，标签大小

（1）使用 size 属性可以设置信息框的大小，有如下几个可选值：

small：小
regular：中（默认值）
large：大

（2）我们可以直接在元素标签上使用 data-tippy-size 属性设置：

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

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

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

五、显示位置设置

1，标签位置

（1）使用 placement 属性可以设置信息框相对于元素的位置，有如下几个可选值：

top：上方（默认值）
bottom：下方
left：左侧
right：右侧

注意：如果设置的位置不足以放下提示标签，那么它会自动显示在相对的另一侧位置。比如：我们设置提示标签显示在上方，如果上方空间不够，则会在自动显示在下方。

（2）我们可以直接在元素标签上使用 data-tippy-placement 属性设置：

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

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

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

2，对齐方式

（1）默认情况下提示标签与页面元素是居中对齐的，我们可以在属性值后面加上“-start”或“-end”后缀，使其左对齐（顶部对齐）或者右对齐（底部对齐）：

（2）同样我们可以直接在元素标签上设置：

<button data-tippy="欢迎访问hangge.com!"
        data-tippy-placement="bottom-start">tooltip</button>

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

tippy('input', {
  content: "欢迎访问hangge.com!",
  placement: "bottom-start"
});

3，偏移量

（1）使用 offset 属性可以设置信息框相对于原来位置的偏移量（单位像素），支持 x 轴和 y 轴设置不同的偏移量。

（2）同样我们可以直接在元素标签上设置：

<button data-tippy="欢迎访问hangge.com!"
        data-tippy-offset="20,30">tooltip</button>

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

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

4，距离

（1）使用 distance 属性可以设置信息框相对于元素的距离（单位像素），它和上面的 offset（偏移量）有点类似，不过它只适用于单轴。

（2）同样我们可以直接在元素标签上设置：

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

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

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

六、延迟、动画效果设置

1，显示或隐藏的延迟时间设置

（1）使用 delay 属性可以设置提示标签显示与隐藏的延迟时间，其值为数组形式。比如：[1000, 2000] 表示延迟 1 秒显示，延迟两秒消失。

注意：该属性默认值为 [0, 20]，如果只想改变其中一个值，另一个值可以用 null 替代（表示使用默认值）。比如只修改隐藏延迟时间：[null, 2000]

（2）我们可以直接在元素标签上使用 data-tippy-delay 属性设置：

<button data-tippy="欢迎访问hangge.com!"
        data-tippy-delay="[1000, 2000]">tooltip</button>

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

tippy('input', {
  content: "欢迎访问hangge.com!",
  delay: [1000, 2000]
})

2，动画持续时间

（1）使用 duration 属性可以设置提示标签显示与隐藏动画效果的持续时间，其值为数组形式。比如：[1000, 2000] 表示显示动画持续 1 秒，消失动画持续2秒。

注意：该属性默认值为 [275, 250]，如果只想改变其中一个值，另一个值可以用 null 替代（表示使用默认值）。比如 [0, null] 表示提示标签显示动画时间为 0（立即显示），消失动画时间不变。

（2）我们可以直接在元素标签上使用 data-tippy-duration 属性设置：

<button data-tippy="欢迎访问hangge.com!"
        data-tippy-duration="[1000, 2000]">tooltip</button>

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

tippy('input', {
  content: "欢迎访问hangge.com!",
  duration: [1000, 2000]
})

3，动画效果

（1）使用 animation 属性可以设置提示标签显示/隐藏的动画效果，有如下几个可选值：

fade：淡入淡出
scale：淡入淡出 + 放大缩小
shift-toward：淡入淡出 + 离开进入
perspective：淡入淡出 + 形状变化
shift-away：淡入淡出 + 进入离开（默认值）

（2）我们可以直接在元素标签上使用 data-tippy-duration 属性设置：

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

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

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

4，弹性效果

（1）将 inertia 设置为 true 的话（默认为 false），在过渡动画时会加上弹性“弹弓”效果。我们可以直接在元素标签上使用 data-tippy-duration 属性设置：

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

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

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

七、主题目皮肤

1，主题介绍

默认情况下我们使用的是暗色主题（dark）。除此之外，tippys 还提供了另外两套主题供我们使用：半透明主题（translucent）和浅色主题（light）。

2，安装配置

（1）首先将 themes 文件夹下的 translucent.css 和 light.css 两个文件下载下来，地址：https://unpkg.com/tippy.js/dist/

（2）然后页面上将这个两个 css 文件配置进来。

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

3，使用说明

（1）我们可以直接在元素标签上使用 data-tippy-theme 属性设置主题：

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

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

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

八、其它设置

1，鼠标点击后隐藏提示标签

（1）默认情况下，当元素的提示标签显示后，如果我们再次点击鼠标，则提示标签则会自动隐藏。使用 hideOnClick 属性可以修改这个行为，可选值如下：

true：点击鼠标则隐藏 tooltip
false：点击鼠标不隐藏 tooltip
toggle：在元素上面点击鼠标不隐藏 tooltip，则元素外部点击鼠标隐藏 tooltip

（2）我们可以直接在元素标签上使用 data-tippy-hideOnClick 属性设置：

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

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

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

2，鼠标跟随

（1）默认情况下提示标签显示后就停留在一个固定的位置，我们可以通过 followCursor 属性设置其是否有跟随效果，可选值如下：

false：不能跟随
true：可以跟随
vertical：仅垂直方向跟随
horizontal：仅水平方向跟随

（2）我们可以直接在元素标签上使用 data-tippy-followCursor 属性设置：

<button data-tippy="欢迎访问hangge.com!"
        data-tippy-arrow="true"
        data-tippy-followCursor="true">tooltip</button>

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

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

附：统一修改默认配置（全局配置）

（1）使用 tippy.setDefaults() 方法可以更改 tippys 的默认配置。它会将应用于之后所有的实例（对之前已经初始化完毕的实例不会有影响）。

（2）比如下面样例代码执行后，之后的所有提示标签默认都有三角箭头，且关闭显示动画。

tippy.setDefaults({
  arrow: true,
  duration: [0, 250] 
})