Shadcn
Hover Card 悬浮卡片
在悬停或聚焦时补充实体摘要信息。
Preview
import { Button } from "@scopify/ui/shadcn/components/button"
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@scopify/ui/shadcn/components/hover-card"
export default function HoverCardDemo() {
return (
<HoverCard openDelay={10} closeDelay={100}>
<HoverCardTrigger asChild>
<Button variant="link">Hover Here</Button>
</HoverCardTrigger>
<HoverCardContent className="flex w-64 flex-col gap-0.5">
<div className="font-semibold">@nextjs</div>
<div>The React Framework – created and maintained by @vercel.</div>
<div className="mt-1 text-xs text-muted-foreground">
Joined December 2021
</div>
</HoverCardContent>
</HoverCard>
)
}
Scopify 说明
本页按 shadcn/ui 官方 Radix UI 组件文档的章节与示例完整整理。示例预览使用 Scopify 当前的 @scopify/ui/shadcn 实现；导入路径、主题 Token 和行为差异以本仓库源码为准。
Installation
npx shadcn@latest add hover-cardUsage
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@scopify/ui/shadcn/components/hover-card"<HoverCard>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent>
The React Framework – created and maintained by @vercel.
</HoverCardContent>
</HoverCard>Composition
Use the following composition to build a HoverCard:
HoverCard
├── HoverCardTrigger
└── HoverCardContentTrigger Delays
Use openDelay and closeDelay on the HoverCard to control when the card opens and closes.
<HoverCard openDelay={100} closeDelay={200}>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent>Content</HoverCardContent>
</HoverCard>Positioning
Use the side and align props on HoverCardContent to control placement.
<HoverCard>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent side="top" align="start">
Content
</HoverCardContent>
</HoverCard>Basic
Preview
import { Button } from "@scopify/ui/shadcn/components/button"
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@scopify/ui/shadcn/components/hover-card"
export default function HoverCardDemo() {
return (
<HoverCard openDelay={10} closeDelay={100}>
<HoverCardTrigger asChild>
<Button variant="link">Hover Here</Button>
</HoverCardTrigger>
<HoverCardContent className="flex w-64 flex-col gap-0.5">
<div className="font-semibold">@nextjs</div>
<div>The React Framework – created and maintained by @vercel.</div>
<div className="mt-1 text-xs text-muted-foreground">
Joined December 2021
</div>
</HoverCardContent>
</HoverCard>
)
}
Sides
Preview
import { Button } from "@scopify/ui/shadcn/components/button"
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@scopify/ui/shadcn/components/hover-card"
const HOVER_CARD_SIDES = ["left", "top", "bottom", "right"] as const
export function HoverCardSides() {
return (
<div className="flex flex-wrap justify-center gap-2">
{HOVER_CARD_SIDES.map((side) => (
<HoverCard key={side} openDelay={100} closeDelay={100}>
<HoverCardTrigger asChild>
<Button variant="outline" className="capitalize">
{side}
</Button>
</HoverCardTrigger>
<HoverCardContent side={side}>
<div className="flex flex-col gap-1">
<h4 className="font-medium">Hover Card</h4>
<p>This hover card appears on the {side} side of the trigger.</p>
</div>
</HoverCardContent>
</HoverCard>
))}
</div>
)
}
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
Preview
"use client"
import {
useTranslation,
type Translations,
} from "@/components/language-selector"
import { Button } from "@/styles/radix-nova/ui-rtl/button"
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/styles/radix-nova/ui-rtl/hover-card"
const translations: Translations = {
en: {
dir: "ltr",
values: {
trigger: "Wireless Headphones",
name: "Wireless Headphones",
price: "$99.99",
left: "Left",
top: "Top",
bottom: "Bottom",
right: "Right",
},
},
ar: {
dir: "rtl",
values: {
trigger: "سماعات لاسلكية",
name: "سماعات لاسلكية",
price: "٩٩.٩٩ $",
left: "يسار",
top: "أعلى",
bottom: "أسفل",
right: "يمين",
},
},
he: {
dir: "rtl",
values: {
trigger: "אוזניות אלחוטיות",
name: "אוזניות אלחוטיות",
price: "99.99 $",
left: "שמאל",
top: "למעלה",
bottom: "למטה",
right: "ימין",
},
},
}
const physicalSides: Array<"left" | "top" | "bottom" | "right"> = [
"left",
"top",
"bottom",
"right",
]
export function HoverCardRtl() {
const { dir, t } = useTranslation(translations, "ar")
return (
<div className="flex flex-wrap justify-center gap-2">
{physicalSides.map((side) => (
<HoverCard key={side} openDelay={10} closeDelay={100}>
<HoverCardTrigger asChild>
<Button variant="outline">{t[side]}</Button>
</HoverCardTrigger>
<HoverCardContent
side={side}
className="flex w-64 flex-col gap-1"
dir={dir}
>
<div className="font-semibold">{t.name}</div>
<div className="text-sm text-muted-foreground">{t.price}</div>
</HoverCardContent>
</HoverCard>
))}
</div>
)
}
API Reference
See the Radix UI documentation for more information.