Hover card
链接目标的预览，在指针悬停于链接或链接获得焦点时打开：沿用 Popover 的面板，与链接之间略有间距。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/hover-card示例
悬停姓名查看司机资料
Taken by Mara K. at 21:10.
import { Avatar, AvatarFallback, AvatarImage } from "@/components/zero/avatar";import { HoverCard, HoverCardContent, HoverCardTrigger,} from "@/components/zero/hover-card";export default function HoverCardDriver() { return ( <p className="font-medium font-zero-text text-zero-md text-zero-text-2"> Taken by{" "} <HoverCard> <HoverCardTrigger href="#mara" className="font-bold text-zero-text underline decoration-zero-accent decoration-2 underline-offset-4 outline-none focus-visible:outline-solid focus-visible:outline-(length:--zero-stroke-thin) focus-visible:outline-zero-focus" > Mara K. </HoverCardTrigger> <HoverCardContent> <div className="flex items-center gap-3"> <Avatar> <AvatarImage src="/samples/portrait-a.svg" alt="" /> <AvatarFallback>MK</AvatarFallback> </Avatar> <div> <div className="font-black font-zero italic">Mara K.</div> <div className="text-zero-text-3 text-zero-xs"> Driver · 41 jobs </div> </div> </div> <p className="text-zero-text-2"> Knows the rail yards. Never late on a rush job this month. </p> </HoverCardContent> </HoverCard>{" "} at 21:10. </p> );}行为
面板从链接处展开，收起时更快。其中只放不看也无妨的补充信息；必需的内容应放在页面上或 Popover 中。
属性
HoverCardContent
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "bottom" | 相对于链接的弹出方向。 |
| align | "start" | "center" | "end" | "center" | 与链接的对齐方式。 |
另可传入 Base UI PreviewCard.Popup 的全部属性。