Tippy.js工具怎么安装使用

本篇文章给大家分享的是有关Tippy.js工具怎么安装使用，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

Tippy.js是一款轻量的tooltip插件，使用简单，扩展性好。该tooltip插件功能强大，提供多种动画效果和主题效果，并允许用户自定义tooltip主题和使用html代码作为tooltip的模板。

安装

可以通过npm来安装在Tippy.js插件。

tippy('#linka', {  html: '#myTemplate',  arrow: true,  animation: 'fade',  distance: 15,  arrowTransform: 'scale(2)'});

选项设置

我们可以在实例化Tippy对象时以对象的方式传入配置参数，例如：

tippy('.tippy', { position: 'right', animation: 'fade' })

也可以在HTML中直接以data-*的方式来使用配置参数：

<button class="btn tippy" title="I'm a tooltip!"  data-animatefill="false"  data-animation="scale"  data-position="bottom">Overridden</button>

Tippy.js常用的主要配置参数如下：

属性     说明     默认值

position        指定tooltip出现的位置。可选：'top' 'bottom' 'left' 'right'        'top'    trigger        指定触发tooltip的事件。可选：'mouseenter' 'focus' 'click' 'manual'        'mouseenter focus'    delay        指定多少毫秒之后才显示tooltip。>=0的整数        0    animation        指定tooltip的动画类型。可选：'shift' 'perspective' 'fade' 'scale' 'none'        'shift'    arrow        是否在tooltip上显示箭头        false    duration        tooltip的持续动画时间，毫秒。        400    html        是否允许在tooltip中显示html模板内容。值为false或模板的id        false    theme        tooltip的主题。可选：'dark' 'light'        'dark'    offset        tooltip的偏移值，单位像素。        0    hideOnClick        指定是否在悬停后单击其元素时隐藏tooltip。true false        true

事件方法

Tippy.js提供了5个可用的回调函数：

tippy('.btn', {  onShow() {    

// When the tooltip has been triggered and has started to transition in  

},  onShown() {    

// When the tooltip has fully transitioned in and is showing  },  onHide() {    

// When the tooltip has begun to transition out  

},  onHidden() {    

// When the tooltip has fully transitioned out and is hidden  

},  wait(show, event) {   

 // Delays showing the tooltip until you manually invoke `show()` 

  }

 }

)

以上就是Tippy.js工具怎么安装使用，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。