本篇文章給大家分享的是有關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對象時以對象的方式傳入配置參數(shù)，例如：
tippy('.tippy', { position: 'right', animation: 'fade' })
也可以在HTML中直接以data-*的方式來使用配置參數(shù)：
Tippy.js常用的主要配置參數(shù)如下：
屬性 說明 默認值
position 指定tooltip出現(xiàn)的位置。可選：'top' 'bottom' 'left' 'right' 'top' trigger 指定觸發(fā)tooltip的事件?？蛇x：'mouseenter' 'focus' 'click' 'manual' 'mouseenter focus' delay 指定多少毫秒之后才顯示tooltip。>=0的整數(shù) 0 animation 指定tooltip的動畫類型?？蛇x：'shift' 'perspective' 'fade' 'scale' 'none' 'shift' arrow 是否在tooltip上顯示箭頭 false duration tooltip的持續(xù)動畫時間，毫秒。 400 html 是否允許在tooltip中顯示html模板內容。值為false或模板的id false theme tooltip的主題?？蛇x：'dark' 'light' 'dark' offset tooltip的偏移值，單位像素。 0 hideOnClick 指定是否在懸停后單擊其元素時隱藏tooltip。true false true
Tippy.js提供了5個可用的回調函數(shù)：
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工具怎么安裝使用，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
