浮動框和工具提示怎麼選？
一句話做出判斷
工具提示只說一句短提示。浮動框可以放更多文字、選項或按鈕。
幾個字就能說清楚時，用工具提示。需要閱讀更多或直接操作時，用浮動框。
看看每個介面模式會做什麼
先試試每個例子，再看它適合處理什麼工作。
Popover
↗ 浮動框
浮動框是連在開啟控制項旁的小面板，可以放有結構的內容和操作，而且不會擋住整個頁面。
popover attribute / Popover點選頭像後，會開啟小型個人資料，顯示角色、聯絡方式和「追蹤」操作。
- 什麼時候用
- 內容應放在觸發來源旁，而且人們仍可繼續操作頁面時，就使用浮動框。
- 什麼時候不要用
- 只有一小段標籤提示時，不要使用浮動框，請改用工具提示。
- 程式裡的名稱
popover attribute / Popover
Tooltip
↗ 工具提示
工具提示是控制項的一小段說明。當滑鼠滑過或鍵盤焦點移到圖示時，它會出現，而且本身不能操作。
role="tooltip"只有圖示的按鈕取得鍵盤焦點時，會顯示「複製連結」，但焦點不會離開按鈕。
- 什麼時候用
- 需要補充簡短控制項標籤時，要讓工具提示在滑鼠停留和鍵盤焦點時都能出現。
- 什麼時候不要用
- 工具提示裡不要放操作、一定要讀的指示或長篇內容。
- 程式裡的名稱
role="tooltip"
快速比較
| 介面模式 | 最適合 | 不適合 | 程式裡的名稱 |
|---|---|---|---|
| 浮動框Popover | 內容應放在觸發來源旁，而且人們仍可繼續操作頁面時，就使用浮動框。 | 只有一小段標籤提示時，不要使用浮動框，請改用工具提示。 | popover attribute / Popover |
| 工具提示Tooltip | 需要補充簡短控制項標籤時，要讓工具提示在滑鼠停留和鍵盤焦點時都能出現。 | 工具提示裡不要放操作、一定要讀的指示或長篇內容。 | role="tooltip" |
上線前檢查
- 01
先寫下使用者要完成什麼事。
- 02
測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。
- 03
不用滑鼠停留或動畫，也要能取得相同資訊。
- 04
放入真實內容，並在小螢幕和大螢幕上測試。
04
可以直接複製的比較需求
團隊還不知道該選哪一種介面模式時，可以複製這段需求。
請在 浮動框（Popover）、工具提示（Tooltip） 中，為真實使用流程選出最合適的介面模式。判斷規則：工具提示只說一句短提示。浮動框可以放更多文字、選項或按鈕。。請寫下任務、內容量和打斷流程的代價，並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由，再沿用專案的設計系統，做出最小且無障礙的版本。