# 气泡卡片 Popover

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/popover
- 资源: 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 无法渲染。

## 示例

- **基础用法**：鼠标移入或点击，弹出气泡，可对浮层上元素进行操作，承载复杂内容和操作。
- **触发方式**：通过设置 `trigger`，可以指定不同的触发方式。
- **位置**：`Popover` 支持 12 个不同的方位。分别为：`上左` `上` `上右` `下左` `下` `下右` `左上` `左` `左下` `右上` `右` `右下`。
- **浮层内关闭**：控制浮层显示。更多示例可查看 [Trigger](/react/components/trigger)组件。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Popover

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|blurToHide|是否在失去焦点的时候关闭弹出框|boolean |`true`|-|
|defaultPopupVisible|默认的弹出框状态|boolean |`-`|-|
|disabled|是否禁用|boolean |`-`|2.11.0|
|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 |`-`|-|
|title|标题.函数类型在 `2.48.0` 支持|ReactNode \| (() => ReactNode) |`-`|-|

---

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