当前位置: > > > tippy.js - 好用的tooltip提示插件使用详解2(常用的样式、动画设置)

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:大

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