弹出框

Popover 是一种提示框，当用户将鼠标悬停在元素上、点击元素或使用键盘聚焦元素时会出现。

它用于在不离开当前屏幕的情况下提供上下文或附加信息。Popover 通过提供对所需信息的快速访问来增强用户体验，而不会使主界面显得杂乱。

§Popover 类型

§Info

用于常规界面

§Special

用于促销活动

§Announcement

用于在公告和通知中进行适度突出显示

§参数

以下参数可用于所有类型的 Popover：Info、Special 和 Announcement：

• Sizes (尺寸)
• Content type (内容类型)
• Positioning (定位)
• "Close" button (关闭按钮)
• Opening and closing method (打开和关闭方式)
• Timing (时机)

§Sizes

组件尺寸在字体大小和边缘边距方面有所不同。组件的宽度和高度会根据内容进行自适应调整。

§Content type

组件支持以下元素：

1. header (标题)
2. description (描述)
3. Action buttons (操作按钮) (您可以使用一个或两个按钮，并交换按钮位置)
4. Close icon (关闭图标)
5. Pin (tail) (指示器/尾巴) 是指向界面元素的附加指示器。当周围有很多元素时，它有助于将用户的注意力集中在特定元素上。

§Positioning

Popover 可以根据其在界面中的位置出现在元素的侧面。如果您使用指示器，它将指向界面元素的中心。

§"Close" button

如果您通过点击而不是悬停或聚焦界面元素来触发 Popover，请使用“关闭”按钮来关闭它。

§Method of opening and closing

• On element hover (鼠标悬停在元素上时) 在这种情况下，当用户将鼠标移出元素时，组件会消失。
• On element click (点击元素时) 在这种情况下，请使用“X”图标关闭组件。
• On element focus using the keyboard (使用键盘聚焦元素时) 当元素失去焦点时，Popover 会消失。
• Can open spontaneously (可自动打开) 当用户进入页面时，Popover 将已打开。适用于广告和教程中的 Popover。请使用“X”图标关闭组件。
• In response to any actions in the interface (响应界面中的任何操作) 例如，在引导流程中，当您提供一系列 Popover 时。

§Timing

• Without delays in appearance and disappearance (出现和消失无延迟) Popover 将立即打开和关闭。适用于简单的常规 Popover。
• With a delay in appearance and disappearance (出现和消失有延迟) 如果您的页面包含许多触发 Popover 的元素，请使用延迟出现。这有助于避免意外悬停在元素上而导致不必要的 Popover。如果提示框包含按钮，请使用延迟关闭。在这种情况下，用户可以在提示框关闭之前将光标移到按钮上。
• With a delay in disappearance (消失有延迟) 当您不需要延迟出现，但您的 Popover 包含按钮时，请使用此选项。

§Special cases

在大多数情况下，Popover 是提供附加信息的不错选择。但是，在某些情况下，应优先考虑其他组件。

• 如果您的提示框很复杂，并且 Popover 组件支持的元素数量不够，您可以基于 Popup 组件设计提示框。
• 如果您需要向用户提供关于按钮点击操作的解释或附加信息，请避免使用 Popover。请改用 Action Tooltip 或 Tooltip。