工具提示和預覽卡怎麼選？
一句話做出判斷
工具提示只放短標籤或提醒。預覽卡會顯示人物、物件或連結的更多資料。
幾個字就夠時，用工具提示。預覽能省下一次跳頁時，用預覽卡；鍵盤和觸控也要能打開。
看看每個介面模式會做什麼
先試試每個例子，再看它適合處理什麼工作。
Tooltip
↗ 工具提示
工具提示是控制項的一小段說明。當滑鼠滑過或鍵盤焦點移到圖示時，它會出現，而且本身不能操作。
role="tooltip"只有圖示的按鈕取得鍵盤焦點時，會顯示「複製連結」，但焦點不會離開按鈕。
- 什麼時候用
- 需要補充簡短控制項標籤時，要讓工具提示在滑鼠停留和鍵盤焦點時都能出現。
- 什麼時候不要用
- 工具提示裡不要放操作、一定要讀的指示或長篇內容。
- 程式裡的名稱
role="tooltip"
Hover Card
↗ 懸停資訊卡
懸停資訊卡是內容較多的預覽，當滑鼠停在參照物上或鍵盤焦點移入時開啟，而且不會擋住頁面。
HoverCard滑鼠停在作者名稱上，就能看到簡介和追蹤人數，不必打開完整個人頁。
- 什麼時候用
- 選讀的預覽資訊能幫助人更快決定下一步時，就使用懸停資訊卡。
- 什麼時候不要用
- 不要把必要資訊藏在懸停後面，因為觸控裝置不一定能可靠開啟。
- 程式裡的名稱
HoverCard
快速比較
| 介面模式 | 最適合 | 不適合 | 程式裡的名稱 |
|---|---|---|---|
| 工具提示Tooltip | 需要補充簡短控制項標籤時，要讓工具提示在滑鼠停留和鍵盤焦點時都能出現。 | 工具提示裡不要放操作、一定要讀的指示或長篇內容。 | role="tooltip" |
| 懸停資訊卡Hover Card | 選讀的預覽資訊能幫助人更快決定下一步時，就使用懸停資訊卡。 | 不要把必要資訊藏在懸停後面，因為觸控裝置不一定能可靠開啟。 | HoverCard |
上線前檢查
- 01
先寫下使用者要完成什麼事。
- 02
測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。
- 03
不用滑鼠停留或動畫，也要能取得相同資訊。
- 04
放入真實內容，並在小螢幕和大螢幕上測試。
04
可以直接複製的比較需求
團隊還不知道該選哪一種介面模式時，可以複製這段需求。
請在 工具提示（Tooltip）、懸停資訊卡（Hover Card） 中，為真實使用流程選出最合適的介面模式。判斷規則：工具提示只放短標籤或提醒。預覽卡會顯示人物、物件或連結的更多資料。。請寫下任務、內容量和打斷流程的代價，並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由，再沿用專案的設計系統，做出最小且無障礙的版本。