Tooltip 文字提示

2019-06-06

文字提示气泡框。

使用方式#

鼠标移入显示提示,移出消失,气泡浮层不承载复杂文本和操作。

用来替换默认 title 提示,提供解释文案。

基本用法#

文本提示#

给文本提供说明文案。

提示方向#

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

提示颜色#

默认提示背景是黑色,文案是白色。可以使用 contrast 调换。白色背景、黑色文案。

图标提示#

部分场景布局紧凑,无法完全展示信息内容,这时可以配合图标给出提示文案。默认是提示 info图标。

API#

参数类型默认值说明
childrenRequirednode-提示框的内容,子节点;
labelelement-选定的元素
iconstring'info'当选定的特定元素是一个图标的时候传入的参数,具体详见 icomoon;
iconAlignstring'text-bottom'设置图标的垂直对齐方式,具体参见 vertical-align 的可选值;
placementstring-提示框的位置,可选'top','right','bottom','left'。 若不传入这一属性,会根据 OverlayTrigger 的位置,自适应选取提示框的位置;
contrastboolfalse提示框的颜色;
iconClassstring-给图标传入的其他 class;