---
title: Popover - 气泡卡片
order: 9
path: /Popover
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 4
  title: 数据展示
  path: /dataShow
---

鼠标悬停、聚焦或点击在某个组件时，弹出的气泡式的卡片浮层。可以对卡片上的元素进行操作。

## 基础使用

鼠标移入或点击，弹出气泡，可对浮层上元素进行操作，承载复杂内容和操作。

<code src="./demos/base.tsx" background="#fff" height="400px"/>

## 触发方式

鼠标移入、聚集、点击。

<code src="./demos/trigger.tsx" background="#fff" height="400px"/>

## 不同位置

<code src="./demos/direction.tsx" background="#fff" height="400px"/>

## API

| 参数                  | 说明         | 类型                         | 默认值 |
| --------------------- | ------------ | ---------------------------- | ------ |
| content               | 卡片内容     | ReactNode \| () => ReactNode | -      |
| title                 | 卡片标题     | ReactNode \| () => ReactNode | -      |
| showCloseButton(可选) | 展示关闭按钮 | `boolean`                    | false  |

更多属性请参考 [Tooltip](/base/dataShow/tooltip/#API)。

## 注意

请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。