HTML & CSS ? Tippy.js 玩轉鼠標懸停提示信息

Tippy.js 玩轉鼠標懸停提示信息

發表于: HTML & CSS. 評論
Sponsor

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

tooltips 鼠標懸停提示效果

網站名稱：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
交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。
贊助商鏈接

與 、 相關的文章

贊助商鏈接
設計達人微信交流社區：shejidaren888
喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。
«
»

{ 發表評論 }