Tooltip
A simple text popup tip.
Install
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 leftupperupper rightlower leftdownlower rightupper leftleftlower leftupper rightrightlower right. - Control: Use
popupVisibleandonVisibleChangeto control the expansion and collapse of the drop-down box. The specific trigger timing of onVisibleChange can be found in the Trigger component document - Color: Set tooltip with different background colors through the
colorproperty
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'] | 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> | - | - |
| 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 | - | - |