安安～我是ChiYu～
昨天，我把林子安的詳細資料放進 Drawer，總算不用每看一位成員，就把整張清單蓋起來一次。
清單脈絡保住了，Drawer 裡卻又冒出三個需求：
最初的 Prompt 把它們揉成一句：
在問號圖示上滑過去，顯示詳細說明和操作。
下面是依照第一版需求重建的錯誤現場，不含真實帳號與個人資料：
圖 1：一個問號同時負責說明、角色設定與主管預覽，滑鼠移開後全部一起消失。
照這句話做下去，很容易得到一個什麼都能裝的 Tooltip。先放說明，再塞按鈕，最後連主管資料也一起住進去。外觀看起來整齊，元件的工作內容已經亂到需要重新面試。
我先把滑鼠移開，問一個比較掃興、但很好用的問題：
如果浮層完全沒有出現，使用者還能完成工作嗎？
這個答案會先淘汰不該躲起來的資訊，再把 Tooltip、Popover 與 Hover Card 分開。
要求 AI 做 hover 動畫很簡單；真正要寫進 Prompt 的，是：
我把三種元件放進 Tooltip、Popover 與 Hover Card 比較頁：
圖 2：先判斷資訊是不是完成任務所必需，再看浮層裡有沒有操作，以及內容是否在預覽既有對象。
卡片是黑色、白色，陰影濃一點或淡一點，都不會改變它的責任。資訊的重要性、可不可以操作，以及觸發方式才會。
我先把 Drawer 裡的需求重新分工。
角色限制會影響管理員的選擇，藏在問號裡風險太高。即使完全沒有碰到圖示，使用者也要看得到哪些角色可以指派、變更後會影響什麼。
這類資訊若缺席可能讓人做錯，就不該參加浮層選秀。直接放在角色設定旁，比替問號加上更漂亮的動畫可靠。
變更角色本來就是 Drawer 裡的主要工作，保留清楚的欄位、錯誤訊息與儲存按鈕即可。沒必要為了湊一個 Popover，再把主要操作藏進第二層浮窗。
主管姓名的快速預覽才適合 Hover Card。姓名仍能前往正式資料頁，浮層只負責先看部門、角色與近期專案。
三個需求拆完，只留下一個浮層，這很正常。認識元件不是為了每種都用一次；知道什麼時候不要用，通常更省事。
接下來我另外用「同步排程」測 Tooltip，用「通知摘要」測 Popover。這兩個情境比較能看出各自的邊界。
我先開啟 Tooltip 元件頁 的 Demo，然後故意不靠 hover。
問號按鈕有「同步排程說明」這個可辨識名稱，旁邊直接顯示：
我用鍵盤把焦點移到問號，Tooltip 顯示「每 15 分鐘執行一次」；按 Escape 後提示收合，焦點仍留在問號按鈕。觸控裝置也可以點選問號暫時開啟。
圖 3：同步狀態與時間直接留在卡片上，Tooltip 只補充「每 15 分鐘執行一次」。
這次測試通過。即使 Tooltip 完全沒出現，使用者仍知道同步是否正常，也看得到下一次執行時間。問號只是補充，不負責藏住救命資訊。
W3C 的 Tooltip Pattern 將 Tooltip 定位為 hover 或 focus 時出現的描述；焦點仍留在觸發元素，並且應能用 Escape 收合。Tooltip 裡不該再放需要 Tab 進去操作的連結、按鈕或輸入欄位。
不過 APG 目前仍把 Tooltip Pattern 列為 Work in Progress，因此我不會只靠它驗收；還會用 WCAG 對可關閉、可滑入與保持顯示的要求補上檢查。W3C WAI-ARIA APG：Tooltip Pattern、W3C WCAG 2.2：Content on Hover or Focus
Tooltip 還有一個常被忽略的空間問題：它不能蓋住觸發元素或使用者正在閱讀的關鍵內容，也要在靠近視窗邊緣時調整位置。這是版面責任，不會改變 Tooltip 的語意；但若文字長到無論放哪裡都遮住工作，就代表內容可能本來就不該住在 Tooltip。
改寫後的 Prompt 會把常駐資訊和補充內容分開：
在 LumenDesk 的資料同步卡片中，於「同步排程」旁加入問號 Tooltip。
同步是否正常、上次完成時間與下一次同步時間必須直接顯示在卡片上。Tooltip 只顯示一句補充：「同步會在每 15 分鐘執行一次」。
使用者以滑鼠 hover 或鍵盤 Tab 聚焦問號時顯示；按 Escape 收合。Tooltip 內不可放連結、按鈕或任何需要操作的內容。游標移進 Tooltip 時要保持顯示，離開觸發元素與浮層後才關閉。觸控裝置可點選問號暫時開啟。
這段 Prompt 沒有只寫「滑過去顯示說明」。它把哪一段必須常駐、哪一段可以晚點出現交代清楚，AI 就不會順手把 09:45 和 10:00 也收進泡泡裡。
接著換通知摘要。
這次浮層裡有三則待處理通知，還有一顆「前往通知設定」按鈕。使用者不只閱讀，還要在裡面做下一步，所以 Tooltip 已經不適任，該交給 Popover。
我從「查看通知摘要」開啟 Popover 元件頁 的 Demo。這個情境含有操作，所以焦點進入第一個按鈕；按 Escape 或點面板外部時收合，焦點再回到原本入口。
圖 4：Popover 內有三則通知和「前往通知設定」，因此需要完整的進入、操作與離開路徑。
這張畫面最重要的不是多了一個按鈕，而是使用者真的走得進去，也走得回來。若 Popover 看得見，鍵盤焦點卻仍卡在外面，它只完成了視覺上的開啟。
HTML 的 popover 屬性提供 Top Layer、顯示狀態與 Light Dismiss 等原生行為，其中 auto 類型可以在點到面板外部時收合。但它不會替內容自動選好語意，也不代表每個 Popover 開啟後都該把焦點移進去。WHATWG HTML：Popover
這次因為通知摘要裡有操作，才選擇把焦點移到第一個按鈕。若只是沒有控制項的短補充，焦點策略會不同。
在 LumenDesk 的通知中心加入「查看通知摘要」按鈕。點選後開啟 Popover，顯示三則待處理通知與「前往通知設定」按鈕。
Popover 開啟後，焦點移到面板裡的第一個操作；按 Escape 或點面板外部時關閉，並讓焦點回到「查看通知摘要」。觸發按鈕要反映目前展開狀態。
這是局部摘要，不要遮住整個頁面，也不要把它做成需要多步填寫的 Dialog。若內容正在編輯且點外部會丟失資料，取消 Light Dismiss，改用明確的完成與取消。
如果內容一路長成表單、開始處理高風險確認，或必須阻止背景操作，Popover 就該下班了。後面的工作應交給 Dialog 或完整頁面，不需要硬把通知小卡養成迷你設定中心。
最後回到主管姓名。
Hover Card 適合預覽已經存在的對象，例如成員、專案或檔案。使用者還留在目前清單，就能先看到部門、角色與近期專案，再決定要不要進正式頁面。
它和 Tooltip 的差別不只是卡片比較大：
Hover Card 元件頁 以「林子安」為入口。桌面可以滑過名稱或用鍵盤聚焦來打開快速預覽，游標也能從姓名移進卡片，不會剛跨過縫隙就被關門。
圖 5：Hover Card 預覽林子安的部門、角色與近期專案；原列表仍保留職稱與角色。
這裡也驗出目前 Demo 還沒過關的地方：「林子安」外觀看起來是連結，點擊卻被攔下來改成開啟預覽。桌面 hover 與鍵盤預覽成立，觸控版卻把「前往正式頁面」和「打開預覽」塞在同一次點擊裡，兩個工作開始搶方向盤。
我的修正方向是：
WCAG 對 hover 或 focus 才出現的額外內容提出三個實際檢查方向：內容能否關閉、游標能否移到內容上，以及內容會不會在使用者還需要時立刻消失。這些要求不是 Hover Card 專屬規格，但拿來驗收很合適。W3C WCAG 2.2：Content on Hover or Focus
在 LumenDesk 的專案負責人欄位保留「林子安」姓名連結，點擊後正常前往完整成員頁。旁邊另放一顆可見的「預覽林子安」按鈕，供觸控與鍵盤使用者開啟 Hover Card。
桌面滑鼠 hover 姓名、鍵盤 focus 預覽按鈕，或點選預覽按鈕時，顯示部門、角色與近期專案。游標從觸發元素移入卡片時不得立即關閉；按 Escape、焦點離開整組元件，或使用者明確收合後才關閉。
Hover Card 不放唯一操作，也不能攔截姓名連結的正常導覽。
只在桌面把游標滑過去，三種元件都可能看起來沒問題。我會再用鍵盤、觸控和「完全不開浮層」各走一次：
| 測試方式 | Tooltip | Popover | Hover Card |
|---|---|---|---|
| 完全不開浮層 | 主要任務仍能完成 | 入口要說清楚裡面有操作 | 原頁仍能前往正式資料 |
| 鍵盤操作 | Focus 顯示，Escape 收合 | Enter／Space 開啟，內容可依序聚焦 | Focus 也能看預覽，不能只支援 Hover |
| 觸控操作 | 關鍵資訊不能依賴它 | 點選開啟，外部點擊或返回可關閉 | 姓名負責前往，獨立按鈕負責預覽 |
| 浮層內容 | 一兩句，不放控制項 | 可以有按鈕或連結 | 預覽既有對象的摘要 |
除了輸入方式，我還會檢查浮層位置。靠近視窗邊緣時，內容不能被切掉；頁面捲動或容器更新後，浮層也不能留在原地指向錯誤對象。定位與語意是兩件事，兩邊都要過。
有些資訊根本不能參加今天的元件選秀。
「同步失敗」「目前沒有權限」或「刪除後會影響哪些資料」，只要沒看見就可能讓工作做錯。這類資訊應直接出現在原頁，或提供非常清楚、可操作的入口，不能只在游標剛好停對地方時才現身。
其餘內容可以沿著這張圖往下走：
圖 6：必要資訊直接顯示；短補充用 Tooltip；需要操作時用 Popover；預覽既有對象時再考慮 Hover Card。
我的順序是：
走完這幾步，元件通常已經選得差不多，不用再靠卡片尺寸猜名字。
把畫面交給 AI 後，我會逐項確認：
只要最後的互動必須靠滑鼠「剛好滑到」，我就不會把它判定為完成。
最後，我把同步頻率留給 Tooltip、通知操作放進 Popover、主管摘要交給 Hover Card。角色權限限制直接顯示在設定旁，沒有為了湊元件又藏回問號裡。
拿掉滑鼠後，我用鍵盤與點選重走一次。Tooltip 與 Popover 的主要路徑成立；Hover Card 的桌面 hover、focus 與移入卡片也能運作，但觸控入口仍要拆成「姓名導覽」和「預覽按鈕」才算通過。這個限制保留在文章裡，不會因為桌面 Demo 看起來正常就一起蓋章。
接著，管理員準備儲存成員角色。畫面同時出現三則訊息：通知管道尚未選擇、系統今晚維護，以及「先從最小權限開始」的建議。
原始需求只寫：
系統有錯誤或提醒時，顯示一個通知。
下面是依第一版需求重建的錯誤現場，不含真實帳號與個人資料：
圖 7：三則訊息用了同一種顏色與位置。通知管道錯誤正在擋住儲存，真正要修正的欄位卻留在下方設定卡。
黃色不是問題，Banner 也沒有做壞。真正麻煩的是操作錯誤、全站公告與決策建議被排成同一層，使用者得自己判斷哪一句正在擋住工作，再往下找對應欄位。
明天就來處理 Alert、Banner 與 Callout，看看這三句話各自該站在哪裡。
iThome鐵人賽
看影片追技術