气泡卡片 Popover

气泡卡片是一种轻量级的弹出框，用于显示额外的信息或确认操作。

何时使用

• 需要显示简短的提示信息时
• 需要用户确认某个操作时
• 不想打断用户主要流程但又需要提供额外信息时

示例

基础用法

最简单的气泡卡片，在点击触发元素时显示内容。

触发方式

Popover 支持两种触发方式：点击和悬停。

点击触发

悬停触发

搭配不同元素

Popover 可以与多种元素搭配使用。

搭配链接

搭配文本

内容变化

Popover 支持不同的内容组合。

只有标题

只有内容

长内容

富文本内容

多个 Popover（互斥）

同一时间只能显示一个 Popover，点击新的会关闭旧的。

API

Popover Props

参数	说明	类型	默认值
mode	触发方式	'click' | 'hover'	'click'
title	标题	ReactNode	-
content	内容	ReactNode	-
children	触发元素	ReactElement	-
className	自定义类名	string	-

注意事项

1. Popover 是通过 Portal 渲染到 body 上的，确保层级高于其他元素
2. 同一时间只能显示一个 Popover，点击新的会自动关闭旧的
3. 点击模式下，点击外部区域会关闭 Popover
4. 悬停模式下，鼠标移出触发元素或 Popover 会延迟关闭
5. Popover 会自动计算位置，确保完全显示在视口内
6. 当窗口大小改变或滚动时，Popover 会重新计算位置