JGuang

文字气泡

Tooltip · Arco Design

交互预览
npm install @arco-design/web-react@2.66.18

文字气泡 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是否在失去焦点的时候关闭弹出框booleantrue-
defaultPopupVisible默认的弹出框状态boolean--
disabled是否禁用弹出boolean--
mini迷你尺寸boolean--
popupHoverStay鼠标移入弹出框的话,弹出框会保留而不销毁booleantrue-
popupVisible弹出框是打开还是关闭状态boolean--
unmountOnExit是否在隐藏的时候销毁 DOM 结构booleantrue-
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--