较为轻量的信息展示方式，鼠标移入时在元素周围弹出气泡式卡片浮层。

适用范围

何时使用：

  • 文字信息量较大，能承载一定的操作（如按钮或文字链接）；

    与文字提示 Tooltip的区别为Tooltip无操作，仅作为对目标元素的补充说明；

何时不适用：

  • 当打断用户操作的内容较多或操作后果较为严重时，应该使用模态对话框 Modals；
  • 信息量较少，无操作时，建议使用文字提示 Tooltip；

通用原则：

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

构成

image.png
1、容器

  • 承载文字的容器，带箭头，分上左、上、上右、下左、下、下右、左上、左、左下、右上、右、右下共12个方向；
  • 容器颜色为白色，而Tooltip为黑色；

2、内容

  • 包含标题、文字描述，必要时还可能包含操作（如按钮或链接）；

交互行为

触发

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

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

消失

  • 鼠标移出目标元素时，立即消失；
  • 点击页面其他区域时，立即消失；

布局

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

image.png