Hover Card
For sighted users to preview content available behind a link.
Installation
›pnpm dlx shadcn@latest add @evolphin/hover-card
Usage
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hover-card";<HoverCard>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent>
The React Framework – created and maintained by @vercel.
</HoverCardContent>
</HoverCard>Type Definitions
interface HoverCardProps {
/** The open state of the hover card */
open?: boolean; /** The default open state when uncontrolled */
?: boolean;
/** Event handler called when the open state changes */
?: (: boolean) => void;
/** The duration from when the mouse enters the trigger until the hover card opens */
?: number;
/** The duration from when the mouse leaves the trigger until the hover card closes */
?: number;
}Examples
Default
API Reference
HoverCard
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | The controlled open state of the hover card. |
defaultOpen | boolean | - | The default open state when uncontrolled. |
onOpenChange | (open: boolean) => void | - | Event handler called when the open state changes. |
openDelay | number | 700 | The duration from when the mouse enters the trigger until the hover card opens. |
closeDelay | number | 300 | The duration from when the mouse leaves the trigger until the hover card closes. |
HoverCardTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Change the component to the HTML tag or custom component of the only child. |
HoverCardContent
| Prop | Type | Default | Description |
|---|---|---|---|
align | `"start" \ | "center" \ | "end"` |
sideOffset | number | 4 | The distance in pixels from the trigger. |
className | string | - | Additional CSS classes |