Components
Action Sheet
Badge
Button
Cards‣
Dialog
Fixed Banner
Floating message
Image
Input field‣
Message Block‣
Status
Tab
Tag
TooltipsTooltips
具指向性的提示對話框，通常用於提供該物件的相關資訊或操作說明，以增強用戶的使用體驗和便利性。
RD已部分元件化，但元件化時未使用 Design System 的文字和顏色。
⚡️ 相關資源：
Components
Figma File
UI Spec
Figma File
Anatomy
解構
- Title
Optional以簡短文字總結訊息的重點。 - Step Count
Optional步驟數顯示「當前順序/總步驟數」，目的是讓使用者有預期心理，知道何時結束說明。 - Message 主要的說明文字，建議文案字數以 4 行為限。
- Button
Optional按鈕可關閉 Tooltip 或進入下一步驟。
Variants
變形
❶ Message
僅說明文字，用於單一功能的簡短提示。
❷ Title + Message
附標題，可顯示較多文字，用於單一功能的簡短說明。
❸ Title + Message + Action
已元件化 多用於步驟說明。若為無步驟的一般提示，可斟酌該情境是否需要按鈕，或以 ❷ 2 lines 雙行 替代。
應用於步驟說明
應用於一般提示（無步驟）
設計注意：Android 實作此元件後，發現部分機型（未知）無法顯示按鈕，導致使用者無法關閉 Tooltip (2023 年)。設計師使用此元件時，需留意點擊空白處是否可以直接關閉 Tooltip。
Behaviors
行為
點擊範圍
Usage Guidelines
使用規範
Concise and clear 簡短、清晰
Highlight the targeted element 強調目標
Tooltips Placement 對話框位置
用目標物在畫面中的位置，判斷 Tooltips 的出現的位置。舉例來說，如果目標物在畫面偏上的位置，建議 Tooltips 出現在目標物下方，以此類推。
Show one tooltip at a time 一次顯示一個
使用者的記憶力有限，建議一次僅顯示一個，最多以三個步驟為限。
Talk about value 說明價值
說明功能對使用者的「價值」，大於說明這個功能是什麼。
Changelog
Date | Version | Notes | Chapters | Person |
|---|---|---|---|---|
February 6, 2023 | 1.11 | ・新增 Tooltip 草稿 | Tooltip |  Verna Wang |