---
title: Tooltip - 文字提示
order: 10
path: /Tooltip
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 4
  title: 数据展示
  path: /dataShow
---

定义：用于文字提示的气泡框。

## 基础使用

<code src="./demos/placement.tsx" background="#fff" height="400px"/>

## 带箭头的文字提示

带箭头的文字提示有较明确的指向性。常用于有多个需要提示的信息并列放置时，对某个具体信息进行提示。
<code src="./demos/base.tsx" background="#fff" height="400px"/>

## 不带箭头的文字提示

不带箭头的文字提示没有明确指向性。常用于不需要针对性提示的场景中。

<code src="./demos/arrow.tsx" background="#fff" height="400px"/>

## 不同触发方式的文字提示

支持常见元素事件触发文字提示。

<code src="./demos/type.tsx" background="#fff" height="400px"/>

## 不同颜色

<code src="./demos/color.tsx" background="#fff" height="400px"/>

## API

| 参数            | 说明                                                   | 类型                         | 默认值    |
| --------------- | ------------------------------------------------------ | ---------------------------- | --------- |
| title           | 提示文字                                               | ReactNode \| () => ReactNode | -         |
| hideArrow(可选) | 隐藏提示箭头                                           | `boolean`                    | false     |
| color(可选)     | 背景颜色(支持`success` `error` `warning` `tips`关键字) | `string`                     | #1F1F1FCC |

### 共同的 API

以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。

| 参数                 | 说明                                                                                                                                           | 类型                                | 默认值              |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ------------------- |
| align                | 该值将合并到 placement 的配置中，设置参考 [rc-tooltip](https://github.com/react-component/tooltip)                                             | object                              | -                   |
| arrowPointAtCenter   | 箭头是否指向目标元素中心                                                                                                                       | boolean                             | false               |
| autoAdjustOverflow   | 气泡被遮挡时自动调整位置                                                                                                                       | boolean                             | true                |
| color                | 背景颜色                                                                                                                                       | string                              | -                   |
| defaultVisible       | 默认是否显隐                                                                                                                                   | boolean                             | false               |
| destroyTooltipOnHide | 关闭后是否销毁 Tooltip，当 `keepParent` 为 `false` 时销毁父容器                                                                                | boolean \| { keepParent?: boolean } | false               |
| getPopupContainer    | 浮层渲染父节点，默认渲染到 body 上                                                                                                             | function(triggerNode)               | () => document.body |
| mouseEnterDelay      | 鼠标移入后延时多少才显示 Tooltip，单位：秒                                                                                                     | number                              | 0.1                 |
| mouseLeaveDelay      | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒                                                                                                     | number                              | 0.1                 |
| overlayClassName     | 卡片类名                                                                                                                                       | string                              | -                   |
| overlayStyle         | 卡片样式                                                                                                                                       | object                              | -                   |
| overlayInnerStyle    | 卡片内容区域的样式对象                                                                                                                         | object                              | -                   |
| placement            | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string                              | `top`               |
| trigger              | 触发行为，可选 `hover` \| `focus` \| `click` \| `contextMenu`，可使用数组设置多个触发行为                                                      | string \| string\[]                 | `hover`             |
| visible              | 用于手动控制浮层显隐                                                                                                                           | boolean                             | false               |
| zIndex               | 设置 Tooltip 的 `z-index`                                                                                                                      | number                              | -                   |
| onVisibleChange      | 显示隐藏的回调                                                                                                                                 | (visible) => void                   | -                   |

## 注意

请确保 `Tooltip` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。