Popover

气泡卡片，点击/悬停/聚焦触发元素时弹出富内容浮层。封装 Tooltip（对齐 Semi 继承链），支持标题、12 方位 position、SVG 箭头、间距、custom 完全受控与 condition 条件触发，浮层命令式定位。

如何引入

import { Popover } from '@chenzy-design/svelte';

基础使用

将触发器作为 children 用 Popover 包裹，浮层内容通过 content 传入，可承载比 Tooltip 更复杂的内容。

弹出位置

通过 position 设置浮层弹出方向，共支持 12 个方位。

受控显示

设置 trigger='custom'，此场景下 Popover 的显示与否完全受 visible 控制。

condition 条件触发

condition={false} 时不响应 hover/click/focus 触发（custom 不受影响）。

condition

显示小三角

通过 showArrow 让 Popover 展示一个指向触发器的小三角，此模式下浮层有默认样式。

指向元素中心

showArrow=true 下传入 arrowPointAtCenter 使小三角始终指向元素中心。

设置浮层背景色

通过 style 与 arrowStyle 定制浮层与小三角的背景色、边框色。

初始化弹出层焦点位置

click 触发的 dialog 模式打开后焦点自动进入浮层首个可交互元素（焦点陷阱）。

API 参考

Popover

Props

属性	说明	类型	默认值
`content`	浮层内容；Snippet 可接收 { initialFocusRef } 入参，绑定到浮层内元素打开时自动聚焦（对齐 Semi content 函数）	`string \| Snippet<[{ initialFocusRef }]>`	undefined
`title`	标题，提供则渲染标题区与下边框	`string \| Snippet`	undefined
`visible`	受控显隐（配合 trigger=custom）	`boolean`	undefined
`defaultVisible`	非受控初始显隐	`boolean`	false
`trigger`	触发方式；custom 完全受控（仅 visible + onVisibleChange）；contextMenu 右键触发。click/custom → dialog role，hover/focus/contextMenu → tooltip role	`'hover'\|'click'\|'focus'\|'custom'\|'contextMenu'`	'hover'
`position`	弹出方位（Semi 12 方位命名 + 2 Over）	`'top'\|'topLeft'\|'topRight'\|'left'\|'leftTop'\|'leftBottom'\|'right'\|'rightTop'\|'rightBottom'\|'bottom'\|'bottomLeft'\|'bottomRight'\|'leftTopOver'\|'rightTopOver'`	'bottom'
`autoAdjustOverflow`	视口溢出时翻转到对侧	`boolean`	true
`showArrow`	是否显示 SVG 小三角（对齐 Semi 默认 false）	`boolean`	false
`arrowPointAtCenter`	小三角是否指向元素中心（需 showArrow）	`boolean`	true
`arrowStyle`	箭头颜色定制（border/bg/opacity）	`{ borderColor?; backgroundColor?; borderOpacity? }`	undefined
`spacing`	浮层与触发器距离(px)，缺省按 showArrow 取 10 / 4（对齐 Semi SPACING_WITH_ARROW / SPACING）	`number \| { x: number; y: number }`	showArrow ? 10 : 4
`margin`	计算溢出翻转时增加的冗余安全边距	`number \| { marginLeft; marginTop; marginRight; marginBottom }`	0
`mouseEnterDelay`	hover 进入延迟(ms)	`number`	50
`mouseLeaveDelay`	hover 离开延迟(ms)	`number`	50
`condition`	false 时不响应 hover/click/focus 触发（custom 不受影响）	`boolean`	true
`clickToHide`	点击浮层及内部任一元素时自动关闭	`boolean`	false
`keepDOM`	关闭时保留浮层 DOM 不销毁（--hidden 隐藏）	`boolean`	false
`disableFocusListener`	hover 触发时不响应键盘 focus 显隐	`boolean`	false
`disabled`	禁用触发	`boolean`	false
`motion`	是否展示进出场动画，reduced-motion 退化	`boolean`	true
`getPopupContainer`	浮层挂载容器，缺省回退 ConfigProvider 全局，再回退 body	`() => HTMLElement \| null \| undefined`	undefined
`zIndex`	浮层 z-index（缺省走 token --cd-z-popover = 1030）	`number`	undefined
`closeOnEsc`	Esc 关闭浮层	`boolean`	true
`guardFocus`	焦点处于浮层内时 Tab 是否循环（缺省随 dialog 模式）	`boolean`	role==='dialog'
`returnFocusOnClose`	关闭后焦点归还触发器（仅 guardFocus 时生效）	`boolean`	true
`stopPropagation`	阻止浮层上的点击事件冒泡	`boolean`	false
`rePosKey`	更新该值手动触发浮层重新定位	`string \| number`	undefined
`class`	浮层自定义类名	`string`	''
`style`	浮层自定义内联样式	`string`	''
`onVisibleChange`	显隐切换回调	`(visible: boolean) => void`	undefined
`onClickOutSide`	点击浮层与触发器外部的回调（仅 custom/click）	`(e: MouseEvent) => void`	undefined
`afterClose`	浮层完全关闭后的回调	`() => void`	undefined
`children`	触发元素（必填）	`Snippet`	undefined

设计变量

变量	默认值	用法
`--cd-color-popover-arrow-bg`	`var(--cd-color-bg-3)`	箭头默认背景色
`--cd-color-popover-arrow-border`	`var(--cd-color-border)`	箭头描边颜色
`--cd-color-popover-bg-default`	`var(--cd-color-bg-3)`	默认背景色
`--cd-color-popover-border-default`	`var(--cd-color-border)`	默认描边颜色

ARIA role	`dialog \| tooltip`
键盘交互	`EscapeTabShift+Tab`

Popover

如何引入

基础使用

弹出位置

受控显示

condition 条件触发

显示小三角

指向元素中心

设置浮层背景色

初始化弹出层焦点位置

API 参考

Popover

Props

Accessibility

设计变量