适用：

• 轻量对用户任务操作进行引导与提示；

• 对页面元素的简单文字说明或补充，无操作（效果同 Tooltip）。

• 轻量的临时打断用户操作的场景，比如某些场景下的二次确认。

不适用：

• 当打断用户操作的内容（比如二次确认的信息或条款）较多或操作后果较为严重，应该使用模态弹窗 Modals。

• 气泡内内容含复杂流程的操作的情况

通用原则

• 适用于较为轻量的打断用户当前操作的场景，把打扰降到最低。

• 用户点击页面空白处可以随时将其关闭

• 气泡中的文本信息应简洁有效，避免冗长赘述

• 作为未展示完整的文字/操作的名称展示，用 tooltip

类型

类型	何时使用
信息补充	用于额外信息的补充
二次确认	仅用于二次确认

信息补充

用户点击信息图标后展示，再次点击后消失。

二次确认气泡

在用户点击确认之前，临时出现，引起用户注意，让用户明确知道自己的操作及其后果。

构成

1. 容器

2. 标题

   1. 当前信息的高度总结，言简意赅，避免折行。

3. 描述

   1. 对标题的信息补充

   2. 仅在「信息补充类型」中，可增加 Link

4. 图标

   1. 快速向用户传递当前信息的性质或严重程度。

   2. 通常放置在文字左侧。如果有标题，则紧跟在标题的左侧。

   3. 在「信息补充类型」中不需要使用

5. 操作：必须存在「确认」和「取消」2 个操作，保证逻辑的完整性。

   1. 确定：可根据具体场景更改文字，比如：确定删除、确定提交

   2. 如果触发控件操作高频，可以加入「不再提示」的选择。

行为

出现

气泡有 3 种触发方式，默认为以下方式中的第 3 种：

1. 鼠标移入（hover）出现，移出消失

2. 聚焦控件出现（focus）出现，点击卡片外消失

3. 点击控件（click）出现，点击气泡外消失

消失

• 点击页面其他区域，气泡消失，无任何数据交付。

• 点击任意操作按钮，气泡消失，页面内开始发送请求（意味着气泡本身只是一种前端层面的阻碍）