Hover Card
For sighted users to preview content available behind a link.
Installation
npm install @radix-ui/react-hover-cardUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hover-card"
export function HoverCardDemo() {
return (
<HoverCard>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent>
The React Framework created by Vercel
</HoverCardContent>
</HoverCard>
)
}Props
| Component | Props | Description |
|---|---|---|
| HoverCard | openDelay?: number closeDelay?: number | The root component for the hover card. |
| HoverCardTrigger | asChild?: boolean | The trigger element that will show the hover card when hovered. |
| HoverCardContent | align?: "start" | "center" | "end" sideOffset?: number alignOffset?: number side?: "top" | "right" | "bottom" | "left" | The content displayed when the trigger is hovered. |