Tippy.js- 好用的 tooltip 套件

如果我們想要在 UI 上面放上一個移過去就能有類似對話框的提示訊息，Tippy.js 是一個方便的好選擇。

安裝

安裝的話可以透過 npm, yarn

之後再專案 import

import tippy from 'tippy.js'; import 'tippy.js/dist/tippy.css'; // optional for styling

或是使用 cdn

<!-- Development -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

<!-- Production -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

建構

建構的方式建議透過 html 的 attribute

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

這樣直接執行就好

tippy('[data-tippy-content]');

tippy 的第一個參數也可以放 css 選擇器，比如：

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

content 內就會是 tooltip 顯示的內容，但覺得還是用 attribute 最方便，可以直接把內容放在裡面。

客製化

物件裡面可以設定是否要箭頭以及漸變時間等。

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

樣式

可以在建構的物件裡放上指定到樣式參數：

tippy(targets, {
  theme: 'tomato',
});

接著在你的 css 寫上這段

.tippy-box[data-theme~='tomato'] {
  background-color: tomato;
  color: yellow;
}

其他更多的應用及設定可以參考官網的說明。