浮動說明與資訊卡

滑過去出現的,不一定是 Tooltip。

先問這段資訊是不是完成任務的必要條件;再問內容是否需要操作;最後確認鍵盤與觸控使用者怎麼找到它。不要把所有浮層都交給 hover。

選擇流程

先決定資訊責任,再挑它要怎麼浮出來。

  1. 使用者不看這段話,也能完成任務嗎?不能:直接顯示資訊,或提供可明確開啟的入口;不要藏成只有 hover 才看到。
  2. 內容只有一兩句補充,且完全不需要操作嗎?是:選 Tooltip。它只負責短提示,保留焦點在原本的觸發元素。
  3. 內容需要摘要、按鈕或下一步嗎?是:選 Popover。入口、標題、第一個操作和關閉方式都要能驗收。
  4. 是在快速認識一個人、專案或名詞嗎?是:考慮 Hover Card,但仍要讓 hover、focus 與觸控都能打開它。

差異對照

三種浮層,差別不在陰影或出現動畫。

點選欄位名稱可進入各元件的閱讀路徑、實際 Demo 與可複製的 AI Prompt。

判斷面向Tooltip工具提示Popover彈出資訊面板Hover Card懸停資訊卡
內容責任一兩句非必要的補充說明。局部的較完整資訊,並可放一兩個下一步操作。針對人物、專案或名詞的快速背景預覽。
觸發方式滑鼠 hover 或鍵盤 focus;觸發點本身必須有可理解名稱。由明確按鈕或控制項開啟,讓使用者知道會看到什麼。滑過、focus 或點選一個已存在的對象;觸控不能被排除。
內容能否操作不能。Tooltip 不接收 focus,也不該放按鈕或連結。可以。需要標題、可抵達的操作與合理關閉規則。通常以閱讀為主;若變成正式操作或關鍵資訊,改用 Popover、頁面或其他明確入口。
重要資訊不能只放在 Tooltip 裡。使用者沒看到也要能理解與完成任務。可呈現局部細節,但高風險或長流程不能躲在小面板。原頁仍要顯示必要身分與工作資訊;卡片只是加速認識對象。
關閉與裝置離開 hover、blur 或 Escape 後收合;觸控只作補充入口。Escape、點外部或再次觸發可關閉,規則要符合內容風險。離開互動範圍、再點一次或 Escape 收合;滑鼠、鍵盤、觸控都能理解。

示範情境

同一個工作區,三種浮層可以各做各的事。

在 LumenDesk 裡,同步圖示旁的頻率說明只需要 Tooltip;通知摘要有下一步,所以用 Popover;成員名稱旁的背景資料則適合 Hover Card。任何會影響決策的角色、同步狀態或操作後果,都必須在原頁或明確入口可取得,不能藏進「滑過去才看得到」的內容。

查看 Tooltip Demo →