点击元素时，在元素周围弹出气泡式确认框。

适用范围

何时使用：

• 操作需要用户二次确认，但希望对用户的干扰较小，相比模态对话框，气泡确认框在形式上更为轻量与便捷；

何时不适用：

• 当打断用户操作的内容较多或操作后果较为严重时，需要强烈引起用户的注意，应该使用模态对话框 Modals；

通用原则：

• 适用于较为轻量的打断用户当前操作的场景，把打扰降到最低。
• 点击页面空白处可以随时将其关闭；
• 文本信息应简洁有效，避免冗长赘述；

构成

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

• 承载文字的容器，带箭头，分上左、上、上右、下左、下、下右、左上、左、左下、右上、右、右下共12个方向；
• 最小宽度为256px，最大宽度为360px，高度自适应

2、描述

• 文字说明描述，让用户明确知道自己的操作及其后果；
• 说明文字格式为：“确认删除「XXX」吗？”；
• XXX 为ID、名称、编号等被删除的内容，如“确认删除「OS20211120150139481227」吗？”；
• 多项内容时，描述文本格式为“确认删除所选的N项内容吗？”，N为选项数量；
• 可在“确认删除「XXX」吗？”后添加补充说明，如“确认删除「OS20211120150139481227」吗？删除后将不可恢复”；

3、图标

• 快速向用户传递当前信息的性质或严重程度，默认为蓝色问号，予以提示用户；
• 放置在文字左侧。

4、操作：

• 必须存在「确认」和「取消」2个操作，保证逻辑的完整性；
• “确定”可根据具体场景更改文字，比如：确定删除、确定提交；
• 如果触发控件操作高频，可以加入「不再提示」的选择。

交互行为

触发

鼠标点击触发器触发，触发器一般为按钮或文字链接；

消失

• 鼠标点击容器外或者取消按钮时，气泡消失，无任何数据交付；
• 鼠标点击确定按钮时，气泡消失，页面内开始发送请求；

布局

• 分上左、上、上右、下左、下、下右、左上、左、左下、右上、右、右下共12个方向；
• 根据视觉流以及目标元素在页面出现位置的限制来箭头判断方向，防止信息被遮挡或超出屏幕；