弹出窗口

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

它用于提供上下文或额外细节，而无需离开当前屏幕。弹出框通过提供快速访问所需信息的方式增强用户体验，而不会使主界面变得杂乱。

弹出框类型

信息型

用于常规界面

特殊型

用于促销活动

公告型

用于公告和通知中的适度突出显示

参数

以下参数可以为所有类型的弹出框配置：信息型、特殊型和公告型：

尺寸
内容类型
定位
"关闭"按钮
打开和关闭方法
时间控制

尺寸

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

S 字体大小为13 px，侧边距为16 px

L 字体大小为15 px，侧边距为24 px

内容类型

该组件支持以下元素：

标题
描述
操作按钮（您可以使用一个或两个按钮，并交换按钮）
关闭图标
箭头（尾部）是指向界面元素链接的附加指示器。当周围有许多元素，而您需要将用户注意力集中在特定元素上时，这很有帮助

定位

弹出框可以根据其在界面中的位置出现在元素的不同侧面。如果您使用箭头，它将指向界面元素的中心。

"关闭"按钮

如果您通过点击而不是悬停或聚焦界面元素来触发弹出框，请使用"关闭"按钮关闭弹出框

打开和关闭方法

在元素悬停时 在这种情况下，当用户将鼠标移出元素时，组件消失。
在元素点击时 在这种情况下，使用叉形图标关闭组件。
使用键盘聚焦元素时 当元素失去焦点时，弹出框消失。
可以自发打开 当用户登陆页面时，弹出框将已经打开。适用于广告和教程中的弹出框。使用叉形图标关闭组件。
响应界面中的任何操作 例如，在引导过程中，当您提供一系列弹出框时。

时间控制

出现和消失没有延迟 弹出框将立即打开和关闭。适用于简单的常规弹出框。
出现和消失有延迟 如果您的页面包含许多触发弹出框的元素，请使用出现延迟。它有助于避免意外悬停在元素上和不需要的弹出框。如果工具提示包含按钮，请使用关闭延迟。在这种情况下，用户可以在工具提示关闭之前将光标移动到按钮上。
消失有延迟 当您不需要延迟出现，但您的弹出框包含按钮时，请使用此选项。

特殊情况

在大多数情况下，弹出框是提供额外信息的好选择。但是，在某些情况下，应该优先选择其他组件。

如果您有一个复杂的工具提示，并且弹出框组件内支持的元素数量不够，您可以基于Popup组件设计工具提示。
如果您需要在按钮点击时为用户提供解释或有关操作的附加信息，请避免使用弹出框。请改用Action Tooltip或Tooltip。