Tippy.js- 好用的 tooltip 套件

分享:

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

安裝

安裝的話可以透過 npm, yarn

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

 

之後再專案 import

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

 

或是使用 cdn

<!-- Development -->
<script src="https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/tippy-bundle.umd.js"></script>

<!-- Production -->
<script src="https://unpkg.com/@popperjs/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></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;
}

 

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

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。