浮動說明與資訊卡

Tooltip|工具提示

在焦點或滑過時補上一小段非必要說明;內容應短、不可操作,不能取代原本必須看見的資訊。

常見俗稱:工具提示、提示泡泡、滑過說明、Tooltip、Hover Hint

60 秒決策

先確認使用者要完成的事。

適合使用

  • 只需要補充一兩句非必要的名詞、圖示或狀態說明。
  • 觸發元素本來已有可理解名稱,Tooltip 只是降低理解成本,不是唯一的資訊來源。

不適合使用

  • 內容需要按鈕、連結、表單、長段落,或使用者必須做出下一步。
  • 使用者若沒看到這段內容就無法理解資料、完成操作或避開風險。

畫面要說清楚的事

不要只交代外觀,也要交代資料與輸入規則。

先讓觸發點自己說得通

問號圖示需要 Accessible Name;Tooltip 是補充,而不是替沒有名稱的圖示擦屁股。

一眼讀完,不放流程

保持一兩句短說明。內容變成段落、設定或下一步時,應改用更合適的浮層。

別遮住使用者正在看的東西

提示靠近觸發點,但不要蓋住欄位、主要資料或下一個需要點擊的位置。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

平時收合

圖示或文字本身已有名稱,沒有 Tooltip 也能理解基本用途。

滑過或聚焦

短說明出現;鍵盤焦點仍留在原本的觸發元素。

離開或 Escape

游標離開、焦點離開或按 Escape 後收合,不留下擋住內容的泡泡。

觸控裝置

不能假設有 hover;關鍵資訊直接可見,補充提示才可以由點選暫時打開。

操作 Demo

先知道要觀察什麼,再動手操作。

操作前先知道

  1. 同步時間說明

    先觀察:焦點是否仍在問號圖示,且 Tooltip 裡沒有任何需要操作的按鈕或連結。

    操作:用 Tab 聚焦問號圖示,閱讀提示後按 Escape;也可以點一下圖示模擬觸控開關。

    預期結果:提示只補充同步頻率;離開或 Escape 後收合,旁邊的關鍵同步狀態始終直接可見。

Tooltip Demo

短提示只能補充,不該藏住工作規則
情境:LumenDesk 工作區
資料同步正常

上次完成:09:45。下一次同步:10:00。

同步排程

用 Tab 聚焦或滑過問號查看提示;在觸控裝置可點一下暫時開啟。同步時間不藏在提示裡。

尚未顯示工具提示。

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

在 LumenDesk 的同步時間圖示旁建立 Tooltip。圖示本身要有可理解的 Accessible Name;使用者以鍵盤 Tab 聚焦或滑鼠滑過時,顯示一兩句補充說明,例如「同步會在每 15 分鐘執行一次」。Tooltip 不能放按鈕、連結或關鍵流程規則;按 Escape、離開焦點或移開游標後應消失。若使用者必須依這段資訊才能完成任務,請把資訊直接顯示在畫面上,不要只藏在 Tooltip。

驗收清單

不要只確認欄位能不能點。

  • 觸發元素沒有 Tooltip 時,是否仍有可理解名稱?
  • 內容是否短到能在一眼內讀完?
  • Tooltip 是否完全沒有按鈕、連結或表單?
  • 鍵盤 focus、滑鼠 hover 與 Escape 是否都有合理結果?
  • 重要資訊是否已在畫面上可見,而不是只靠 hover?
  • 提示是否避開欄位和主要操作,不造成遮擋?