轻量的信息展示方式，通常由用户主动唤起。

适用：

  • 轻量对用户任务操作进行引导与提示；
  • 对页面元素的简单文字说明或补充，无操作（效果同 Tooltip）。
  • 轻量的临时打断用户操作的场景，比如某些场景下的二次确认。

不适用：

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

通用原则

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

Balloon 气泡提示（废弃） - 图1

类型

类型 何时使用
Tooltip 文本提示 轻量化信息提示，作为额外信息的补充
Popover 二次确认 操作的二次确认，可以承载更复杂的内容，比如链接或按钮等

文本提示

用户移入信息图标后展示，移出后自动消失，文本提示信息建议不超过 10 个字。
image.png

二次确认

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

  • 二次确认需要出现“确认删除「XXX」吗？”这句话，如果是其他二次确认的操作如关机、下线，则把删除替换成对应的操作文案；
  • XXX为ID、名称、编号等被删除的内容，如“确认删除「OS20211120150139481227」吗？”；
  • 可在“确认删除「XXX」吗？”后添加补充说明，说明应尽量简洁；
  • 气泡尺寸最小宽度为256px，最大宽度为360px，高度自适应

构成

image.png

  1. 容器
  2. 描述
    1. 仅在「信息补充类型」中，可增加 Link
  3. 图标
    1. 快速向用户传递当前信息的性质或严重程度。
    2. 放置在文字左侧。
    3. 在「信息补充类型」中不需要使用
  4. 操作：必须存在「确认」和「取消」2个操作，保证逻辑的完整性。
    1. 确定：可根据具体场景更改文字，比如：确定删除、确定提交
    2. 如果触发控件操作高频，可以加入「不再提示」的选择。

行为

出现

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

  1. 鼠标移入（hover）出现，移出消失
  2. 聚焦控件出现（focus）出现，点击卡片外消失
  3. 点击控件（click）出现，点击气泡外消失

    消失

  • 点击页面其他区域，气泡消失，无任何数据交付。
  • 点击任意操作按钮，气泡消失，页面内开始发送请求（意味着气泡本身只是一种前端层面的阻碍）