HoverCard
hover-card悬停卡片 · Popover 引擎自研 hover 开/移出延迟关(复刻 Tooltip delay 范式) + 富内容
用法
基础用法
悬停链接/词条延迟展开信息卡，移出延迟关闭；非模态，不锁滚、不抢焦点。
tsx
<HoverCard>
<HoverCardTrigger render={<button type="button">@瑚琏设计系统</button>} />
<HoverCardContent>
<div className="flex gap-3">
<div className="size-10 rounded-full bg-primary/12">瑚</div>
<div>
<p>瑚琏设计系统</p>
<p>吸取各家最佳实现，统一成一套瑚琏 API + 明暗 token。</p>
</div>
</div>
</HoverCardContent>
</HoverCard>弹出方位
side 控制卡片相对触发器的方位，箭头自动续上对应边线。
tsx
<>
<HoverCard>
<HoverCardTrigger render={<button type="button">向上展开</button>} />
<HoverCardContent side="top">{/* 头像 + 简介 */}</HoverCardContent>
</HoverCard>
<HoverCard>
<HoverCardTrigger render={<button type="button">向右展开</button>} />
<HoverCardContent side="right">{/* 头像 + 简介 */}</HoverCardContent>
</HoverCard>
</>何时用
hover 触发展开的富内容卡片（用户名片、术语释义、链接预览），带开/关延迟避免误触。纯文本短提示用 Tooltip；click 触发 + 操作按钮用 Popover；专做「封面图 + 标题 + 域名」链接预览用 Glimpse。
导入
ts
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@hulianui/ui"Props
HoverCard：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| openDelay | number | 300 | 悬停多少毫秒后打开 |
| closeDelay | number | 150 | 移出多少毫秒后关闭 |
HoverCardContent：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| side | "top"｜"right"｜"bottom"｜"left" | "bottom" | 浮层方位 |
| align | "start"｜"center"｜"end" | "center" | 对齐 |
| sideOffset | number | — | 与触发器的间距 |
| className | string | — | 额外类名 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
HoverCard children | ReactNode | Trigger + Content |
HoverCardContent children | ReactNode | 卡片内容 |
HoverCardTrigger 用 render prop 接管触发元素（行内链接/按钮）。
禁忌 / 坑
- 本组件已按 [[hovercard-on-focus-managing-popover-flickers-set-initial-final-focus-false]] 把焦点交还语义关掉（不在打开时夺取焦点），避免 hover + focus 在 focus-managing popover 上 ping-pong 无限闪烁；若 fork 改造别重新打开焦点托管。
- 用
openDelay/closeDelay调防误触，别把closeDelay设 0，否则光标在 trigger 与卡片间移动的瞬间会闪关。
相关
Playground
<HoverCard>
<HoverCardTrigger render={<a>@瑚琏</a>} />
<HoverCardContent side="bottom" align="center">
{/* 头像 + 简介 */}
</HoverCardContent>
</HoverCard>