Tippy.js 玩轉鼠標懸停提示信息
原文：http://www.shejidaren.com/tippy-js.html
網頁設計師對 tooltips 鼠標經過提示效果應該不陌生，這種效果雖然可以直接用 css hover 來實現，但是如果想更友好的、更美觀的效果，可能就要借助 JS 來實現啦。今天和大家分享的 Tippy.js 就是很不錯的鼠標懸念插件，多種提示信息用法及樣式，並且是輕量級哦。
網站名稱：Tippy.js
下載&預覽：https://atomiks.github.io/tippyjs/
截圖演示
默認：
這是鼠標經過最基本的效果
方向：
如果你想設備不同的方向也是可以的，比如上、下、左、右
箭頭樣式：
也可以加入箭頭樣式，讓提示更加清晰。
動畫：
可以給tooltips提示效果加入動畫效果，這里只展示了一小部分
樣式：
提示效果還能加樣式的哦，你看：
HTML 樣式：
還能 在提示框里加入 HTML 元素。
其它效果
達人只截取圖一部分截圖，官方網頁還有更多的演示和詳細使用教程哦！
使用教程
第1步：引入 JS 插件
<head> ... <script src="tippy.all.min.js"></script> </head>
第2步：HTML 代碼
<button class="btn" title="I'm a tooltip!">Text</button> <button class="btn" title="<strong>I'm a bold tooltip!</strong>">Text</button>
第3步：指定要執行 JS 效果的元素
<script>
tippy('.btn')
</script>
額外選項：你可以為這個元素增加一些動畫效果，更多參數請參考官網哦。
<script>
tippy('.btn', {
placement: 'right',
animation: 'scale',
duration: 1000,
arrow: true
})
</script>
好了，如果以后需要做好看的 tootips 提示樣式，不妨試試這個插件，僅14KB哦！
推薦：查看最受歡迎的 301 個設計網站 →
http://hao.shejidaren.com