iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
1
Modern Web

從平面轉型成網頁設計的 UI/UX 設計師系列 第 27

【Day 27】好用的 JavaScript 動態提示工具庫 - Tippy.js

https://ithelp.ithome.com.tw/upload/images/20201012/20107810iSvS1HaehK.png

Tippy.js

Tippy.js 是一款輕量的 JavaScript 動態提示工具庫,提供完整的 tooltip 工具提示、popover 彈出框、dropdown 下拉選單...等等功能。
支援多種動畫效果視覺主題,使用上很簡單方便!

官方網站:Tippy.jsGithub

範例

https://ithelp.ithome.com.tw/upload/images/20201012/20107810zwMStdZVUP.png

安裝

CDN

<!-- Tippy.js -->
<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>

請將以上放置到 body 的最底部,並視情況決定是否單獨連結 dist/tippy.css

官方完整使用範例

<html>
  <head>
    <title>Tippy</title>
  </head>
  <body>
    <button id="myButton">My button</button>

    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script>
      // With the above scripts loaded, you can call `tippy()` with a CSS
      // selector and a `content` prop:
      tippy('#myButton', {
        content: 'My tooltip!',
      });
    </script>
  </body>
</html>

以上步驟就可以有一個簡單的 tooltip 了!
以下筆者會詳細教學 HTMLJavaScript 的使用方法。

HTML

首先,請在想要創建 tooltip 的標籤上添加「 data-tippy-content 」屬性:

<button data-tippy-content="我是提示文字">Tooltip</button>

JavaScript

之後可以為它添加一些自定義的效果:

<script>
  duration: 0, // 持續時間
  arrow: false, // 箭頭取消
  delay: [1000, 200], // 動畫延遲時間
</script>

也可以寫成屬性放在 HTML 內:

<button
  data-tippy-duration="0"
  data-tippy-arrow="false"
  data-tippy-delay="[1000, 200]"
>
  Text
</button>

若想要改成點選之後才顯示工具提示,也有支援:

  trigger: 'click', // 點選才顯示

All Props 這份文件是所有可以設定的參數屬性列表,非常的多!有需要的朋友可以研究看看。


以上就是簡單的 Tippy.js 使用方法,對於要製作「輸入帳號密碼不得留空」的 UI 介面很好運用 d(`・∀・)b


上一篇
【Day 26】CSS Animation - CSS 動畫資源蒐集與使用教學
下一篇
【Day 28】Youtube iframe 影片自動縮放大小 - CSS 解決方法
系列文
從平面轉型成網頁設計的 UI/UX 設計師30

尚未有邦友留言

立即登入留言