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工具怎么安裝使用，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。