# Tooltip

- Page: https://jiguang132.com/resources/arco-design/docs/tooltip
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

A simple text popup tip.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: When the mouse is moved in, the bubble appears, and when the mouse is moved out, the bubble disappears.
- **Mini Size**: Suitable for small scenes or digital bubble styles.
- **Position**: Tooltip supports 12 different positions. They are: `upper left` `upper` `upper right` `lower left` `down` `lower right` `upper left` `left` `lower left` `upper right` `right` `lower right`.
- **Control**: Use `popupVisible` and `onVisibleChange` to control the expansion and collapse of the drop-down box. The specific trigger timing of onVisibleChange can be found in the [Trigger](/react/components/trigger#controlled-usage) component document
- **Color**: Set tooltip with different background colors through the `color` property

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Tooltip

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|blurToHide|Whether close the popup when the target element losing focus|boolean |`true`|-|
|defaultPopupVisible|Whether the popup is visible by default|boolean |`-`|-|
|disabled|Whether disable popup|boolean |`-`|-|
|mini|Whether show mini style|boolean |`-`|-|
|popupHoverStay|Whether the popup is visible when the mouse hovers over the popup|boolean |`true`|-|
|popupVisible|Whether the popup is visible|boolean |`-`|-|
|unmountOnExit|Whether to destroy the popup when hidden|boolean |`true`|-|
|childrenPrefix|Set an additional class name(`${childrenPrefix}-open`) for the container of the popup.|string |`-`|-|
|color|background color of the popup-layer|string |`-`|2.22.0|
|position|The position of the popup relative to the target.|\| 'top'\| 'tl'\| 'tr'\| 'bottom'\| 'bl'\| 'br'\| 'left'\| 'lt'\| 'lb'\| 'right'\| 'rt'\| 'rb' |`top`|-|
|trigger|Trigger mode|[TriggerProps](trigger#trigger)['trigger'] |`hover`|-|
|content|The content shown in popup|ReactNode |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|triggerProps|The Props of the `Trigger` component|Partial<[TriggerProps](trigger#trigger)> |`-`|-|
|getPopupContainer|The parent node which the popup will be rendered to.|(node: HTMLElement) => Element |`-`|-|
|onVisibleChange|Callback when the visibility of the popup is changed|(visible: boolean) => void |`-`|-|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt