浮動說明與資訊卡
滑過去出現的,不一定是 Tooltip。
先問這段資訊是不是完成任務的必要條件;再問內容是否需要操作;最後確認鍵盤與觸控使用者怎麼找到它。不要把所有浮層都交給 hover。
選擇流程
先決定資訊責任,再挑它要怎麼浮出來。
差異對照
三種浮層,差別不在陰影或出現動畫。
點選欄位名稱可進入各元件的閱讀路徑、實際 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 →