Popover
A floating card popped by hovering, focusing, or clicking on a element.
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: Basic usage.
- Trigger: By setting
trigger, you can specify different trigger methods. - Position:
Popoversupports 12 different positions.top lefttoptop rightbottom leftbottombottom righttop leftleftbottom lefttop rightrightbottom right. - Manual close: Manual close popover. For more examples, see the Trigger component.
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
Popover
| 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 to disabled | boolean | - | 2.11.0 |
| 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 | - | - |
| title | Title of the popup card. Function types are supported in 2.48.0 | ReactNode | (() => ReactNode) | - | - |