官網『Tooltip 工具提示』設計完整攻略：中小企業如何用一個小氣泡降低客服負擔、提升表單填完率

你是不是常遇到這種狀況：詢問表單明明只有 5 個欄位，客戶卻填到一半就離開；客服天天回覆「統一編號怎麼查」「密碼有什麼規則」這種問題；或是新功能上線，總有客戶問「那顆按鈕是做什麼用的」？

這些問題的根源，往往不是頁面寫不清楚，而是「文字寫太多會擋住主流程，寫太少又看不懂」。在這個兩難之間，Tooltip（工具提示）是最划算的解法之一。它平常不出現、不擋路，需要時才浮出一行小字，把猶豫變成行動。

這篇文章從中小企業老闆的角度，把 Tooltip 從觀念、適用場景、設計細節到常見錯誤一次講清楚，看完你就知道為什麼有些網站體驗順到不行，有些卻怎麼填都填不完。

Photo by Patrick Perkins on Unsplash

一、什麼是 Tooltip？跟 Popover、Modal 差在哪？

Tooltip 直譯叫「工具提示」，是一段在觸發特定動作（滑鼠移過去、聚焦、點擊小問號）後才出現的浮動小提示。它的特性是：內容短、不需要主動關閉、不會擋住主要操作、用來「補充說明」而非傳遞主要訊息。

很多老闆會搞混 Tooltip、Popover、Modal 的差別，用一個簡單方式分：

• Tooltip：純文字、單向提示，像在按鈕旁偷偷貼一張便利貼
• Popover：可放比較長的內容，甚至有連結、按鈕，需要使用者主動點掉
• Modal（彈窗）：強制中斷使用者，必須回應後才能繼續

選擇工具的順序很清楚：能用 Tooltip 就不要用 Popover，能用 Popover 就不要用 Modal。越輕量的提示，越能讓使用者保持在主流程上。

二、官網上哪些地方最值得加 Tooltip？

不是每個欄位都要加 Tooltip。加太多會讓頁面到處是小問號，反而像在告訴使用者「我們的網站很複雜」。以下 5 個場景，最值得放：

1. 詢問表單裡「不直觀」的欄位

像「公司統一編號」「指定服務地點郵遞區號」「希望聯絡時段」這類欄位。客戶不是不想填，是「不確定要填什麼格式」。標籤旁放一個小問號，hover 時跳出「8 碼數字，可在發票或營業登記證上找到」，填寫率會有感提升。

2. 價格表的方案細節

方案比較表上常有「儲存空間 100GB」「支援 5 個帳號」這種規格。但對非技術背景客戶來說，「100GB 大概可以放多少資料？」才是真正的問題。在規格旁加小問號，跳出「相當於約 25,000 張照片或 200 小時影片」，比直接秀規格更有說服力。

3. 表單的密碼規則與格式限制

會員註冊頁面要求「密碼至少 8 碼、英數混合、含特殊符號」，與其在欄位下方寫一大段灰字，不如收進 Tooltip 或邊輸入邊即時提示，視覺更乾淨。

4. 圖示按鈕意圖不夠明確時

齒輪、垃圾桶、雲端、分享等圖示沒有文字標籤，hover 顯示「設定」「刪除」「下載」就非常重要，能大幅降低使用者猜測成本。

5. 專業術語的口語化解釋

網站若有「SSL 憑證」「響應式設計」「Schema 標記」等專有名詞，可在第一次提及時做成帶 Tooltip 的底線，hover 時用一句白話補充，例如「SSL 憑證 = 讓網址前面顯示綠色鎖頭，代表資料傳輸有加密」。對 B2B 中小企業官網特別有效。

Photo by Kelly Sikkema on Unsplash

三、Tooltip 設計的 6 個關鍵原則

1. 文字越短越好，超過 80 字就要重新想

Tooltip 是「補一句話」，不是「補一段話」。理想是 1～2 句、加總不超過 80 個字。如果寫到第三句，那代表這件事該放在 FAQ 或說明頁面。

2. 觸發點要明顯，但不能搶戲

常見符號是「ⓘ」「?」或一條細虛底線。圖示大小跟旁邊文字差不多，顏色用次要灰色或品牌色淡版本，讓客戶知道「這裡有東西」，但不誤以為是錯誤訊息。

3. 出現位置：優先放在上方或右上方

桌機版 Tooltip 建議放元素的上方，比較不會被滑鼠遮住。但要加邊界判斷，靠近螢幕邊緣時自動翻到反方向，不然會被裁掉。

4. 出現與消失要有 0.2 秒的延遲

滑鼠經過頁面時可能不小心晃到觸發點，立刻跳出 Tooltip 會很煩。建議 hover 後 100～200 毫秒才出現，滑開後也淡出 100 毫秒消失，讓互動有「呼吸感」。

5. 千萬不要把關鍵資訊只放在 Tooltip 裡

這是最致命的錯誤。Tooltip 應該是「沒看到也能完成主要任務」的補充。如果把「運費、退款政策、重要免責聲明」這種影響決策的內容只藏在 hover 才看得到的地方，行動裝置用戶根本看不到，還可能踩到消保法的雷。

6. 對鍵盤與螢幕閱讀器友善

Tooltip 不能只靠滑鼠 hover 觸發。對使用 Tab 鍵的鍵盤用戶、視障朋友、年長者來說，focus 也要能觸發，並用 aria-describedby 把提示綁到主元素，這是基本的無障礙設計。

四、手機版怎麼處理？這是最容易翻車的地方

手機沒有 hover，這是 Tooltip 在 RWD 上最大的挑戰。實務上有三種做法：

做法 A：改成點擊觸發。點小問號才跳出 Tooltip，再點一次或點空白處關掉。最直覺，但觸發區域要至少 44×44 像素，避免手指點不準。

做法 B：手機版改用 inline 文字。桌機 hover 顯示，手機版直接把提示文字放在欄位下方的灰色小字，避免「行動用戶完全看不到提示」的問題。

做法 C：改用 Bottom Sheet。對需要比較多說明的情境，可以做成從底部滑出的小卡片，比 Tooltip 容納更多內容、又比 Modal 不打擾。LINE、Uber Eats、街口都常用這個手法。

Photo by Zulfugar Karimov on Unsplash

五、5 個常見錯誤，你的網站中了幾個？

錯誤 1：用 HTML 原生 title 屬性當 Tooltip。樣式醜、出現慢、手機無作用、無法控位置。建議用 CSS + JS 自己做，或用成熟套件（Tippy.js、Floating UI）。

錯誤 2：Tooltip 內容裡放連結或按鈕。Tooltip 一移開就消失，使用者根本沒辦法把游標移過去按。需要放連結，就改用 Popover 或獨立的說明頁。

錯誤 3：把錯誤訊息塞進 Tooltip。表單驗證錯誤一定要用顯眼的紅色文字直接顯示在欄位下方，不能藏在要 hover 才看得到的 Tooltip，否則使用者根本不知道為什麼一直送不出去。

錯誤 4：所有欄位都加問號。「姓名」「電話」「Email」這種國民級欄位不需要任何提示。滿頁的小問號只會讓使用者覺得「這表單很複雜」。原則是：會卡住的才加，一眼看懂的就不加。

錯誤 5：忘了測試在窄螢幕的顯示。Tooltip 在 1920px 螢幕上完美，到 360px 手機可能被切一半。上線前一定要在不同尺寸下實測，特別是頁面邊緣的觸發點。

六、結語：Tooltip 不只是設計細節，是客服成本

很多老闆覺得 Tooltip 是設計師才該關心的事，跟營運無關。但實際上它影響的是：表單填完率（連動詢問單數量）、客服重複問題數量（連動人力成本）、客戶對品牌的專業感（連動價格接受度）。

一顆設計到位的 Tooltip，可能比你想像中更值錢。建議從「客戶最常打電話問什麼問題」反推，把那些重複出現的疑問，一個一個變成不打擾人的小提示。客戶滿意，你也省力。

奧隆專注於協助台灣中小企業打造可實際幫助營運的官網，從首頁排版、表單流程到細節互動體驗都有完整方法論。如果你希望官網能少接幾通客服電話、多收幾張詢問單，歡迎與我們聊聊。