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

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

本文就來詳細(xì)分析下這兩個組件的區(qū)別和聯(lián)系，幫助你做好應(yīng)用。

一、氣泡卡片??Popover

氣泡卡片（Popover）是當(dāng)用戶點(diǎn)擊 / 鼠標(biāo)移入元素時，就會彈出氣泡式的卡片浮層。當(dāng)對于某個元素有更多的解釋性描述和相關(guān)操作時，這些內(nèi)容可以收納到元素的氣泡卡片中，根據(jù)用戶的操作行為進(jìn)行展現(xiàn)。

其用法特征是：

1. 用戶可以在浮層卡片上進(jìn)行相關(guān)操作，也即氣泡卡片可以并需要承載更復(fù)雜的內(nèi)容和交互功能。

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

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

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

二、文字氣泡??Tooltips

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

其用法特征是：

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

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

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

三、使用建議

1. 關(guān)于使用場景

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

2. 關(guān)于組件樣式

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

其實(shí)這兩個組件的背景顏色上的差異并不是重點(diǎn)，因?yàn)檫@兩個組件都可以使用其他顏色（比如帶有透明度的品牌色）做背景底色。顏色并不具備唯一標(biāo)準(zhǔn)。AntD 就提供了多種顏色的文字氣泡樣式：

3. 關(guān)于理解規(guī)范

也許你已經(jīng)發(fā)現(xiàn)，即使我們將一個組件的使用規(guī)范和應(yīng)用場景解釋得再全面，在使用時也總會出現(xiàn)一些特殊的業(yè)務(wù)需求和應(yīng)用場景無法嚴(yán)格按照規(guī)范來執(zhí)行。

面對復(fù)雜多樣的業(yè)務(wù)需求，我們更應(yīng)該學(xué)會：在理解業(yè)務(wù)需求的基礎(chǔ)上，合理調(diào)整組件的使用方式和樣式。

組件的規(guī)范對設(shè)計(jì)師來說并不應(yīng)該是限制或約束，而是一種能夠幫助我們快速實(shí)現(xiàn)產(chǎn)品設(shè)計(jì)一致性，保證基礎(chǔ)體驗(yàn)的快速方式。