Popovers 气泡卡片

2019-08-28

弹出的气泡式卡片浮层。

使用场景#

当目标元素有进一步的描述和相关操作时,可以收纳到卡片中,根据用户的操作行为进行展现,建议相关操作控件(不包含文字链)不超过3个。

当只需要对相关元素补充文字描述说明时,请使用 tooltip 文字提示;

当对相关元素有复杂的进一步操作时(3个以上的操作控件),请使用对话框;

基本用法#

文本提示#

浮层内可以是容器、标题、内容文本、各种类型信息、各种链接。

提示方向#

  • 可以指定提示展示的方向;
  • 如果不指定,默认是朝上 top 展示;
  • 不指定方向,根据 Popover 在浏览器中的位置,在初次渲染时会调整展示方向,避免提示信息超出窗口,同时可能方便用户查看提示信息。

交互方式#

  • 打开:鼠标移入(hover,默认),点击(click);
  • 关闭:鼠标移出或点击空白处;

箭头颜色#

  • 默认是白色

API#

参数类型默认值说明
triggerunion(array, string)'hover'触发动作,字符串或数组,默认为‘hover’;
contentRequirednode-提示框的内容,子节点;
childrenRequirednode-选定的元素
placementstring-提示框的位置,可选'top','right','bottom','left'。 若不传入这一属性,会根据 OverlayTrigger 的位置,自适应选取提示框的位置;
rootClosebool-是否点击外部区域关闭popover;