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

适用：

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

不适用：

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

通用原则

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

Balloon 气泡提示 - 图1

类型

类型 何时使用
Tooltip 文本提示 轻量化信息提示，作为额外信息的补充
Popover 二次确认 操作的二次确认

文本提示

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

二次确认

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

构成

image.png

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

行为

出现

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

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

    消失

  • 点击页面其他区域，气泡消失，无任何数据交付。
  • 点击任意操作按钮，气泡消失，页面内开始发送请求（意味着气泡本身只是一种前端层面的阻碍）
  1. <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="弹出的信息">按钮</button>