Popover 气泡卡片
Popover 用来承载比 Tooltip 更完整的信息块和轻操作。Rue 实现采用当前的轻卡片视觉, 同时补充 title、content、overlay、触发方式、 定位、箭头和受控开合等核心能力。
它更适合字段解释、快速状态卡、内联操作和轻量二次确认,而不是用 Modal 打断页面流程。
# Basic popovers
部署窗口
今晚 22:00 后会自动切换到新构建。
审批提示
这个批次还缺法务签字,建议先补全再提交。
Release checklist
包含资源校验、追踪链路确认与灰度开关检查。
# Placement
Top start
适合贴着触发器左边缘展示信息。
Bottom end
右下角常用来对齐工具条末端。
Left top
适合桌面端列表或表格中的侧向说明。
Right bottom
在工具面板、筛选块里会更自然。
# Trigger modes
默认 hover
鼠标进入时展示,移出后收起。
Click trigger
再次点击同一个触发器即可关闭。
Context menu
右键适合承载次级命令或辅助说明。
Focus trigger
适合输入前的字段说明与校验前置提示。
# Controlled visibility
受控 Popover
可以由外部按钮、校验状态或流程步骤直接控制。
# Arrow and semantic styling
Centered arrow
箭头会对齐到触发器中心,更适合宽按钮或卡片入口。
Editorial pulse
本周更新节奏
+12%首屏转化高于上周
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title / content / overlay | 支持标准标题与内容,也支持直接传完整 overlay 卡片以承载更自由的结构。 | any | - |
trigger | 触发方式,可单个或组合使用 hover、focus、click、contextMenu。 | 'hover' | 'focus' | 'click' | 'contextMenu' | Array<...> | 'hover' |
open / defaultOpen / onOpenChange | 受控与非受控开合,适合做外部按钮联动、校验提示或场景化引导。 | boolean / boolean / (open: boolean) => void | false / false / - |
placement | 支持四个基础方向和常见角落别名,便于和成熟浮层组件保持一致心智。 | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | ... | 'top' |
arrow | 支持关闭箭头或通过 pointAtCenter 让箭头对齐触发器中心。 | boolean | { pointAtCenter?: boolean } | true |
destroyOnHidden | 关闭后是否卸载浮层内容;默认保持 DOM 并切换可见状态,适合轻操作卡片。 | boolean | false |
mouseEnterDelay / mouseLeaveDelay | 控制 hover 模式的开合延时,单位为秒。 | number / number | 0.08 / 0.12 |
classNames / styles | 按 root、trigger、overlay、panel、header、title、content、arrow 等语义块定制。 | PopoverClassNames / PopoverStyles | - |
overlayClassName / overlayStyle / zIndex | 补充浮层层级、尺寸和视觉样式扩展。 | string / Record<string, any> / number | - / - / - |