Hover Card 悬停卡片
在鼠标悬停或键盘聚焦链接时预览实体的补充信息。
使用概览
适合使用
- 用户可在不离开当前上下文的情况下预览人员或资源摘要时。
不建议使用
- 内容包含必须完成的操作，或主要面向没有悬停能力的设备时。
真实示例
成员资料预览
悬停或聚焦成员链接时显示简短资料。
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/hover-card.json基础用法
导入
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@richardqiu/quartz/hover-card";JSX
<HoverCard><HoverCardTrigger href="/people/lin">林晨</HoverCardTrigger><HoverCardContent>产品设计师 · 上海</HoverCardContent></HoverCard>状态与控制摘要
默认
键盘焦点可见
已打开
已关闭
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
openDelay | number | 700 | 控制指针停留多久后打开预览卡片。 |
组合结构
- 01
HoverCard - 02
HoverCardTrigger - 03
HoverCardContent
键盘约定
- 焦点打开 HoverCard，Escape 关闭，焦点保留在原链接上。
可访问性契约
- 内容只能作为补充信息，因为触摸与辅助技术可能不暴露悬停预览。
- 触发器必须是真实链接，并具有有效目的地与可访问名称。