Tippyjs輕量的純 JavaScript 動(dòng)態(tài)提示工具插件庫。它提供了大量的不同懸停效果和超過 20 個(gè)可定制的選項(xiàng)。Tippy.js 是超級(jí)輕量的，具有相當(dāng)不錯(cuò)的瀏覽器兼容性：

Github

//文檔：https://atomiks.github.io/tippyjs/

//Github： https://github.com/atomiks/tippyjs

功能特性

Tippy.js是由Popper.js支持的高度可定制的工具提示和彈出庫。

• 智能定位引擎

優(yōu)化的定位引擎，可防止翻轉(zhuǎn)和溢出

• 高性能

在低端設(shè)備也能夠保持很高的性能

• 多功能

適用于鼠標(biāo)，鍵盤和觸摸輸入

• 無障礙

兼容WAI-ARIA

• 主題化的

通過自定義CSS樣式，包括額外的主題和動(dòng)畫

• 插件化

使用插件增強(qiáng)功能

• 輕量級(jí)

最小化包的大小

• Typescript的支持

開箱即用的TypeScript支持

• 支持IE11 +

與99％的臺(tái)式機(jī)和97％的移動(dòng)用戶兼容

默認(rèn)示例

它具有#333的背景色和指向該元素的箭頭，并且由鼠標(biāo)輸入或焦點(diǎn)事件觸發(fā)，因此它會(huì)在懸停時(shí)顯示，通過鍵盤導(dǎo)航聚焦或在使用觸摸設(shè)備時(shí)輕擊。

<button id="myButton">My Button</button>

tippy('#myButton', {
  content: "I'm a Tippy tooltip!"
});

安裝

常用npm或者yarn安裝使用

# npm
npm i tippy.js
# Yarn
yarn add tippy.js

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

使用

• 創(chuàng)建tooltips

給在你想要的標(biāo)簽元素上添加data-tippy-content屬性

<button data-tippy-content="Tooltip">Text</button>
<button data-tippy-content="Another Tooltip">Text</button>

或者

tippy('#singleElement', {
  content: 'Tooltip'
});

• 自定義

tippy('button', {
  duration: 0,
  arrow: false,
  delay: [1000, 200]
});

也可以指定特定的屬性

<button
  data-tippy-duration="0"
  data-tippy-arrow="false"
  data-tippy-delay="[1000, 200]"
>  Text</button>

• HTML Content

內(nèi)容道具可以接受字符串，元素或函數(shù)。

普通字符串：

tippy('button', {
  content: '<strong>Bolded content</strong>'
});

innerHtml：

<div id="template" style="display: none;">
  <strong>Bolded content</strong>
</div>

const template = document.getElementById('template');
tippy('button', {
  content: template.innerHTML
});

element:

可以傳遞元素本身，這對(duì)于使事件偵聽器保持連接狀態(tài)（或在框架控制內(nèi)部元素時(shí)非常有用）

const template = document.getElementById('example');
template.style.display = 'block';
tippy(singleButton, {  content: template
});

Template linking:

如果您有多個(gè)引用，每個(gè)引用都有其自己的唯一模板，則可以通過以下方式將它們鏈接到關(guān)聯(lián)的模板：

<button data-template="one">One</button>
<button data-template="two">Two</button>
<button data-template="three">Three</button>
<div style="display: none;">
  <div id="one">
    <strong>Content for `one`</strong>
  </div>
  <div id="two">
    <strong>Content for `two`</strong>
  </div>
  <div id="three">
    <strong>Content for `three`</strong>
  </div>
</div>

tippy('button', {
  content(reference) {    const id = reference.getAttribute('data-template');
    const template = document.getElementById(id);
    return template.innerHTML;
  }});

主題Themes

可以通過CSS進(jìn)行任何自定義樣式，本身提供了以下幾個(gè)主題可供選擇

• light

• light-border

• material

• translucent

---

tippy('button', {
  theme: 'light'
});

總結(jié)

具體的使用方式還是具體的樣式，都可以直接參照官方文檔，個(gè)人認(rèn)為這是獨(dú)立組件中非常不錯(cuò)的一個(gè)小組件，enjoy it！