愛了！這個網頁氣泡提示組件，讓你的網站更炫酷！

  網頁設計師對 tooltips 鼠標通過提示效果應該不陌生，這種效果雖然能夠直接用 css hover 來實現，可是若是想更友好的、更美觀的效果，可能就要藉助 JS 來實現。今天和你們分享的 Tippy.js 就是很不錯的鼠標懸念插件，多種提示信息用法及樣式，而且是輕量級哦。

  Tippy.js是一款輕量級的純js tooltip工具提示插件。tooltip插件功能強大，提供多種動畫效果和主題效果，並容許用戶自定義tooltip主題和使用html代碼做爲tooltip的模板。

截圖演示

鼠標通過最基本的效果

若是你想設備不一樣的方向也是能夠的，好比上、下、左、右

也能夠加入箭頭樣式，讓提示更加清晰

能夠給tooltips提示效果加入動畫效果，這裏只展現了一小部分

提示效果還能加樣式的

還能在提示框里加入 HTML 元素

其它效果

安裝

npm安裝Tippy.js插件

# npm
npm i tippy.js

# Yarn
yarn add tippy.js

導入文件:

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

外部引用

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

使用說明

  Tippy.js 在 github 開源，能夠自由下載學習和無償使用，包括商用。這是獨立組件中很是不錯的一個小組件，祝各位搬磚愉快。

結尾

本期就分享到這裏，我是小編南風吹，專一分享好玩有趣、新奇、實用的開源項目及開發者工具、學習資源！
但願能與你們共同窗習交流,歡迎關注個人公衆號 【Github導航站】。

往期推薦

太漂亮了！有了3款開源圖標庫，不用再去求設計師了

10個相見恨晚的vue.js庫！用好了，事半功倍！

太及時了！13個Spring Boot練手項目,用好了，升職漲薪不用愁

程序員接私活必備後臺框架，不用重複造輪子，網友：太好用了！

還在從頭至尾擼項目？這6個SpringBoot項目用好了，事半功倍！

「00後縮寫黑話翻譯器」登上GitHub熱榜，中年網民終於能看懂年輕人的awsl