tippy.js - 好用的tooltip提示插件使用详解2(常用的样式、动画设置)
四、形状样式设置
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:大

<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”后缀,使其左对齐(顶部对齐)或者右对齐(底部对齐):

<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,安装配置

(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 属性设置主题:
(2)也可以在使用 js 初始化的时候设置:
<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] })