Hover card
A rich surface previewed from a name, on hover or on focus
Assigned to
Usage
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@gpuixui/components/hover-card";
export const Mention = () => (
<HoverCard>
<HoverCardTrigger>@ada</HoverCardTrigger>
<HoverCardContent label="Ada Lovelace">
<text>Mathematician · Analytical Engine</text>
</HoverCardContent>
</HoverCard>
);The trigger is a link
shadcn's trigger is an anchor; 0.11.0 has none, so HoverCardTrigger is the
shared action painted as the library's link look — underlined text with no
fill and no edge — rather than the ghost chip it used to wear, which read as a
toggle button sitting in a sentence. It keeps the action's press, focus and
aria-expanded, and opens on hover after openDelay, on focus at once, or on a
press.
Composition
HoverCard
├── HoverCardTrigger
└── HoverCardContentAPI
| Part | Prop | Type | Default |
|---|---|---|---|
HoverCard | open / defaultOpen | boolean | — / false |
HoverCard | onOpenChange | (open: boolean) => void | — |
HoverCard | openDelay | number — milliseconds of hover before opening | 700 |
HoverCard | closeDelay | number — milliseconds after the last hold leaves | 300 |
HoverCard | children | PartChildren | — |
HoverCardTrigger | action props | variant ("link" by default), size, disabled, onClick, aria-label, style, ref, testId — the shared Button contract | size="md" |
HoverCardTrigger | busy props | loading, loadingLabel, reducedMotion, leading, trailing — the shared Button busy contract | — |
HoverCardContent | label | string — the surface's accessible name | — |
HoverCardContent | side | "top" | "right" | "bottom" | "left" | "bottom" |
HoverCardContent | align | "start" | "center" | "end" | "center" |
HoverCardContent | sideOffset | number | 4 |
HoverCardContent | collisionPadding | number | 8 |
HoverCardContent | className / style | string / StyleDesc | — |
HoverCardContent | testId / children | string / PartChildren | — |
Keyboard
- Escape
- closes the card and returns focus to the trigger
read from hover-card.tsx
Edit this page on GitHubpackages/components/docs/hover-card.mdx