60 秒決策
先確認使用者要完成的事。
適合使用
- 只需要補充一兩句非必要的名詞、圖示或狀態說明。
- 觸發元素本來已有可理解名稱,Tooltip 只是降低理解成本,不是唯一的資訊來源。
不適合使用
- 內容需要按鈕、連結、表單、長段落,或使用者必須做出下一步。
- 使用者若沒看到這段內容就無法理解資料、完成操作或避開風險。
畫面要說清楚的事
不要只交代外觀,也要交代資料與輸入規則。
先讓觸發點自己說得通
問號圖示需要 Accessible Name;Tooltip 是補充,而不是替沒有名稱的圖示擦屁股。
一眼讀完,不放流程
保持一兩句短說明。內容變成段落、設定或下一步時,應改用更合適的浮層。
別遮住使用者正在看的東西
提示靠近觸發點,但不要蓋住欄位、主要資料或下一個需要點擊的位置。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
平時收合
圖示或文字本身已有名稱,沒有 Tooltip 也能理解基本用途。
滑過或聚焦
短說明出現;鍵盤焦點仍留在原本的觸發元素。
離開或 Escape
游標離開、焦點離開或按 Escape 後收合,不留下擋住內容的泡泡。
觸控裝置
不能假設有 hover;關鍵資訊直接可見,補充提示才可以由點選暫時打開。
操作 Demo
先知道要觀察什麼,再動手操作。
操作前先知道
同步時間說明
先觀察:焦點是否仍在問號圖示,且 Tooltip 裡沒有任何需要操作的按鈕或連結。
操作:用 Tab 聚焦問號圖示,閱讀提示後按 Escape;也可以點一下圖示模擬觸控開關。
預期結果:提示只補充同步頻率;離開或 Escape 後收合,旁邊的關鍵同步狀態始終直接可見。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 的同步時間圖示旁建立 Tooltip。圖示本身要有可理解的 Accessible Name;使用者以鍵盤 Tab 聚焦或滑鼠滑過時,顯示一兩句補充說明,例如「同步會在每 15 分鐘執行一次」。Tooltip 不能放按鈕、連結或關鍵流程規則;按 Escape、離開焦點或移開游標後應消失。若使用者必須依這段資訊才能完成任務,請把資訊直接顯示在畫面上,不要只藏在 Tooltip。驗收清單
不要只確認欄位能不能點。
- 觸發元素沒有 Tooltip 時,是否仍有可理解名稱?
- 內容是否短到能在一眼內讀完?
- Tooltip 是否完全沒有按鈕、連結或表單?
- 鍵盤 focus、滑鼠 hover 與 Escape 是否都有合理結果?
- 重要資訊是否已在畫面上可見,而不是只靠 hover?
- 提示是否避開欄位和主要操作,不造成遮擋?