组件

Tooltip 文字提示

用于辅助的文字提示，可代替 HTML 元素默认的 title 属性。

  • <Tooltip> 文字提示。
  • <Whisper> 监听触发器，包裹被监听对象的外面，触发事件后通知到 <Tooltip> 展示出来。

获取组件

import { Tooltip, Whisper } from 'rsuite';

演示

默认

位置

  • left , top , right , bottom 是物理中的 4 个方向, 表示显示的位置。
  • leftStart , 在 left 后面加了一个 start, 这里的 start 是逻辑方式，表示对齐方式是 Y 轴的开始。

有关 start 和 end 的描述可参照 W3C 关于 CSS逻辑属性和值（CSS Logical Properties and Values Level 1） 的首份工作草案（First Public Working Draft）

触发事件

有三种状态可以触发提示 tooltip 的信息: click、focus、hover、active

注意: Safari ignoring tabindex

容器与防止溢出

禁用的元素

具有禁用属性的元素禁用后无法将鼠标悬停或单击它们来触发弹出 Tooltip。 解决方法是，您要可以通过包装 <div> 或 <span> 触发叠加层，并覆盖禁用元素上的 pointer-events。

Props

<Tooltip>

属性名称 类型 (默认值) 描述
arrowOffsetLeft number or string 箭头相对 left 位置偏移量
arrowOffsetTop number or string 箭头相对 top 位置偏移量
classPrefix string ('tooltip') 组件 CSS 类的前缀
positionLeft number 相对 left 位置偏移量
positionTop number 相对 top 位置偏移量

<Whisper>

属性名称 类型 (默认值) 描述
container HTMLElement or (() => HTMLElement) 设置渲染的容器
delay number 延迟时间
delayHide number 隐藏的延迟时间
delayShow number 展示的延迟时间
onBlur () => void 失去焦点回调函数
onClick () => void 点击的回调函数
onFocus () => void 获取焦点的回调函数
onMouseOut () => void 鼠标离开的回调函数
placement enum: PlacementAll ('right') 显示位置
preventOverflow boolean 防止浮动元素溢出
speaker * union: Tooltip, Popover 展示的元素
trigger union: 'click', 'hover', 'focus', 'active' (['hover','focus']) 触发事件,可以通过数组配置多事件

相关组件