# Popover

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

A floating card popped by hovering, focusing, or clicking on a element.

## 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**: Basic usage.
- **Trigger**: By setting `trigger`, you can specify different trigger methods.
- **Position**: `Popover` supports 12 different positions. `top left` `top` `top right` `bottom left` `bottom` `bottom right` `top left` `left` `bottom left` `top right` `right` `bottom right`.
- **Manual close**: Manual close popover. For more examples, see the [Trigger](/react/components/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#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 |`-`|-|
|title|Title of the popup card. Function types are supported in `2.48.0`|ReactNode \| (() => ReactNode) |`-`|-|

---

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