文字气泡 Tooltip
鼠标悬停、聚焦或点击在某个组件时,弹出的文字提示。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css,用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter,否则 Message、Modal 等命令式 API 无法渲染。
示例
- 基础用法:鼠标移入,气泡出现,鼠标移出,气泡消失。
- 迷你尺寸:适用于小场景或数字气泡样式。
- 位置:Tooltip 支持 12 个不同的方位。分别为:
上左上上右下左下下右左上左左下右上右右下。 - 受控模式:通过
popupVisible和onVisibleChange控制下拉框的展开和收起。 具体 onVisibleChange 的触发时机可查看Trigger组件文档 - 不同颜色:通过
color属性设置不同背景色的tooltip
示例来自 Arco Design 官方仓库(MIT),固定在 npm 2.66.18 对应的提交;部分示例使用在线图片或上传地址,预览中网络请求被禁用。
API
Tooltip
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| blurToHide | 是否在失去焦点的时候关闭弹出框 | boolean | true | - |
| defaultPopupVisible | 默认的弹出框状态 | boolean | - | - |
| disabled | 是否禁用弹出 | boolean | - | - |
| mini | 迷你尺寸 | boolean | - | - |
| popupHoverStay | 鼠标移入弹出框的话,弹出框会保留而不销毁 | boolean | true | - |
| popupVisible | 弹出框是打开还是关闭状态 | boolean | - | - |
| unmountOnExit | 是否在隐藏的时候销毁 DOM 结构 | boolean | true | - |
| childrenPrefix | 会在打开状态给元素加上一个类,格式为 ${childrenPrefix}-open。 | string | - | - |
| color | 弹出层背景色 | string | - | 2.22.0 |
| position | 弹出框的方位,有 12 个方位可供选择 | | 'top'| 'tl'| 'tr'| 'bottom'| 'bl'| 'br'| 'left'| 'lt'| 'lb'| 'right'| 'rt'| 'rb' | top | - |
| trigger | 触发方式 | TriggerProps['trigger'] | hover | - |
| content | 弹出的内容 | ReactNode | - | - |
| className | 节点类名 | string | string[] | - | - |
| style | 节点样式 | CSSProperties | - | - |
| triggerProps | 可以接受所有 Trigger 组件的参数 | Partial<TriggerProps> | - | - |
| getPopupContainer | 弹出框挂载的节点 | (node: HTMLElement) => Element | - | - |
| onVisibleChange | 显示或隐藏时触发的回调 | (visible: boolean) => void | - | - |