都是交互反饋和提示組件，大家可能會疑惑：文字氣泡 Tooltips 和氣泡卡片 Popover 的區別是什么，兩者之間的應用場景如何？本文對兩者的差異進行總結，希望對你有所幫助。

同樣都是交互反饋及提示組件，你可能會疑惑：文字氣泡 Tooltips 和氣泡卡片 Popover 有什么區別？分別有哪些特定的使用場景？

本文就來詳細分析下這兩個組件的區別和聯系，幫助你做好應用。

一、氣泡卡片??Popover

氣泡卡片（Popover）是當用戶點擊 / 鼠標移入元素時，就會彈出氣泡式的卡片浮層。當對于某個元素有更多的解釋性描述和相關操作時，這些內容可以收納到元素的氣泡卡片中，根據用戶的操作行為進行展現。

其用法特征是：

1. 用戶可以在浮層卡片上進行相關操作，也即氣泡卡片可以并需要承載更復雜的內容和交互功能。

2. 卡片中可以包括的內容有：文字說明，圖片內容，操作按鈕，相關鏈接等等。

3. 組件功能側重于：承載信息和操作。即收納并在需要的時候展示與該元素內容相關的信息和操作。這些信息的特征通常是：

• 并不緊急但比較重要的解釋內容；
• 有一部分的用戶需要隨時閱讀的內容；
• 在點擊關鍵操作后給用戶確認“是否繼續進行”的提示（Ant Design 也單獨把這個功能拿出來做成做了一個組件：Popconfirm 氣泡確認框，如下圖）。

二、文字氣泡??Tooltips

文字氣泡（Tooltips）是相對簡單的文字提示氣泡框。用戶使用鼠標移入元素后顯示提示，移出后提示消失。

其用法特征是：

1. 文字氣泡通常不承載復雜的信息和操作，僅提供一段文案解釋，也即用戶在文字氣泡中不能做除閱讀外的其它操作。

2. 該組件功能側重于：解釋說明。即對局部內容或元素進行文字性的解釋說明。通常來說該氣泡是對其載體本身的解釋，比如：

• 一個特殊的功能按鈕；
• 專有名詞、難懂詞匯；
• 看不出具體目的地的操作鏈接
• 特殊的 icon 等。

三、使用建議

1. 關于使用場景

• 氣泡卡片 Popover：常用于承載信息和操作。承載的內容和形式更為多樣。
• 文字氣泡 Tooltips：常用于解釋說明。僅承載簡單的文案信息。

2. 關于組件樣式

有同學看過 Ant Design 組件庫提供的組件樣例，會覺得氣泡卡片 Popover 是白色背景，而文字氣泡 Tooltips 是半透明黑色背景。

其實這兩個組件的背景顏色上的差異并不是重點，因為這兩個組件都可以使用其他顏色（比如帶有透明度的品牌色）做背景底色。顏色并不具備唯一標準。AntD 就提供了多種顏色的文字氣泡樣式：

3. 關于理解規范

也許你已經發現，即使我們將一個組件的使用規范和應用場景解釋得再全面，在使用時也總會出現一些特殊的業務需求和應用場景無法嚴格按照規范來執行。

面對復雜多樣的業務需求，我們更應該學會：在理解業務需求的基礎上，合理調整組件的使用方式和樣式。

組件的規范對設計師來說并不應該是限制或約束，而是一種能夠幫助我們快速實現產品設計一致性，保證基礎體驗的快速方式。