气泡卡片

Popover

UI 组件也叫：弹出卡片、气泡框、Popconfirm、浮动卡片

一句话：点击或悬停某个元素后，在它旁边弹出的小卡片，可以放标题、几行说明甚至按钮。

详细解释

气泡卡片贴着触发它的元素弹出，带一个小三角箭头指向来源，不遮挡整个页面，也没有遮罩。点击卡片外的地方或再次点击触发元素，它就会收起。常见用途有：头像上弹出用户资料卡、「删除」按钮旁弹出「确定删除吗」的小确认框（Ant Design 里叫 Popconfirm）、表头里弹出筛选选项。

它和 文字提示（Tooltip）的区别是：文字提示只放一句纯文字，悬停出现、移开就消失；气泡卡片可以放标题、图片和按钮，用户能把鼠标移进去操作。和 对话框 的区别是：对话框居中弹出、盖住整个页面、必须处理完才能继续；气泡卡片只占一小块，是轻量的补充信息。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

点击用户头像时，在头像正下方弹出一个宽 280px 的气泡卡片，带指向头像的小箭头，里面显示头像、昵称、简介和「发消息」按钮；点击卡片外部或按 Esc 关闭，靠近屏幕边缘时自动换到另一侧弹出。

由触发元素和浮动卡片组成，卡片带指向触发元素的小箭头，内部可有标题、内容区和操作按钮。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。