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)
触发事件
Whisper 提供了一个 trigger 属性,用于在各种场景下控制 Tooltip 显示。属性值包括:
click: 当用户点击元素时会被触发,再点击会关闭。contextMenu: 当用户点击鼠标右键时触发。focus: 当用户点击或触摸元素或通过键盘的tab键选择它时会被触发。hover: 鼠标悬停到元素上时触发,鼠标离开则关闭。active: 激活元素时会被触发。none: 无触发事件,一般用于需要通过方法触发时候使用。
容器与防止溢出
禁用的元素
具有禁用属性的元素禁用后无法将鼠标悬停或单击它们来触发弹出 Tooltip。 解决方法是,您要可以通过包装 <div> 或 <span> 触发叠加层,同时在元素上覆盖 pointer-events 属性。
Props
<Tooltip>
| 属性名称 | 类型 (默认值) |
描述 |
|---|---|---|
| children * | React.Node | 组件的内容 |
| classPrefix | string ('tooltip') |
组件 CSS 类的前缀 |
| visible | boolean | 组件默认可见的 |
<Whisper>
| 属性名称 | 类型 (默认值) |
描述 | |
|---|---|---|---|
| container | HTMLElement or (() => HTMLElement) | 设置渲染的容器 | |
| delay | number | 延迟时间 | |
| delayHide | number | 隐藏的延迟时间 | |
| delayShow | number | 展示的延迟时间 | |
| onBlur | () => void | 失去焦点回调函数 | |
| onClick | () => void | 点击的回调函数 | |
| onEnter | () => void | 显示前动画过渡的回调函数 | |
| onEntered | () => void | 显示后动画过渡的回调函数 | |
| onEntering | () => void | 显示中动画过渡的回调函数 | |
| onExit | () => void | 退出前动画过渡的回调函数 | |
| onExited | () => void | 退出后动画过渡的回调函数 | |
| onExiting | () => void | 退出中动画过渡的回调函数 | |
| onFocus | () => void | 获取焦点的回调函数 | |
| onMouseOut | () => void | 鼠标离开的回调函数 | |
| placement | enum: PlacementAll ('right') |
显示位置 | |
| preventOverflow | boolean | 防止浮动元素溢出 | |
| speaker * | union: Tooltip, Popover | 展示的元素 | |
| trigger | union: 'click', 'contextMenu', 'hover', 'focus', 'active', 'none' (['hover','focus']) |
触发事件,可以通过数组配置多事件 |
Whisper methods
- open
显示一个 Tooltip。
open: (delay?: number) => void- close
隐藏一个 Tooltip。
close: (delay?: number) => void相关组件
<Popover>弹出框<Message>消息框<Alert> 提醒框<Notification>通知框