# 文字气泡 Tooltip

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/tooltip
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

鼠标悬停、聚焦或点击在某个组件时，弹出的文字提示。

## 安装

```bash
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](/react/components/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#trigger)['trigger'] |`hover`|-|
|content|弹出的内容|ReactNode |`-`|-|
|className|节点类名|string \| string[] |`-`|-|
|style|节点样式|CSSProperties |`-`|-|
|triggerProps|可以接受所有 `Trigger` 组件的参数|Partial<[TriggerProps](trigger#trigger)> |`-`|-|
|getPopupContainer|弹出框挂载的节点|(node: HTMLElement) => Element |`-`|-|
|onVisibleChange|显示或隐藏时触发的回调|(visible: boolean) => void |`-`|-|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt