Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →
使用者體驗模式6 分鐘閱讀·Updated 2026 年 10 月·ExodeUI 團隊

不妨礙解釋的工具提示

如何設計有幫助的工具提示:簡短的補充資訊、懸停和鍵盤存取、觸摸替代方案,以及為什麼基本說明不屬於工具提示。

直接總結與定義

核心要點

工具提示是懸停或鍵盤焦點上顯示的簡短訊息,用於提供補充訊息,例如指標的含義。保持簡短,切勿在其中放置重要說明,使它們可以通過鍵盤訪問,在觸控螢幕上提供基於點擊的替代方案,並且不要在其中放置連結或按鈕。

什麼是工具提示

Nielsen Norman Group 將工具提示定義為一條簡短的資訊性訊息,當使用者透過滑鼠懸停或鍵盤懸停(將鍵盤焦點保持在元素上)啟動與元素互動時,就會出現該訊息。由於它們依賴懸停,因此工具提示通常在觸控螢幕上不可用。

帶有資訊圖示的儀表板指標,顯示簡短的工具提示定義,旁邊是要做和不做的指南
簡短的補充定義是工具提示的經典用法。

補充,絕不是必需的

NN/g 給了一個明顯的錯誤範例:某個網站將密碼要求放在工具提示中。人們完成任務所需的資訊應該顯示在螢幕上。工具提示適合定義、為什麼要求欄位的解釋以及僅圖示按鈕的標籤。

無障礙

使工具提示可供所有人使用:

  • 在鍵盤焦點和懸停時打開。
  • 讓人們透過 Escape 忽略它而不移動焦點。
  • 當指針移動到其上時,使其保持打開狀態。
  • 將其連接到觸發器,以便螢幕閱讀器讀出它。
  • 不要在裡面放入互動內容;請改用彈出視窗。

觸控裝置上的工具提示

触摸时不存在悬停。使用可見的資訊圖標,點擊即可開啟一個小彈出窗口,或顯示內聯說明。對於複雜的企業指標,標籤旁邊的資訊圖示是每個裝置上熟悉的模式。

動作和時機

顯示前的短暫延遲可以避免當指標經過元素時工具提示閃爍;一旦打開,相鄰的工具提示就會立即出現。扳機的快速淡出或小規模有助於人們看到它的來源。將其保持在 150 毫秒左右。

要記住的關鍵 Principle

  • 工具提示是簡短且補充的
  • 切勿在工具提示中隱藏重要說明
  • 支援鍵盤焦點和Escape
  • 在觸控​​裝置上使用可點擊的資訊圖標
  • 工具提示內沒有互動式內容

常見問題解答

來源

  1. Tooltip Guidelines — Nielsen Norman Group

相關指南和範例

小動作,大清晰度

調整瀏覽器中工具提示和彈出視窗的快速、平靜的過渡。

打開彈簧發生器
免費試用