Overlay
HoverCard
A card that opens when its trigger is hovered or focused. It shows supplementary content after a short delay and closes on blur or Escape, so the keyboard reaches it too.
ReactVueWeb Components
View in Storybook Playground
Examples
<HoverCard content={<UserSummary id={id} />}>
<a href={`/users/${id}`}>@lily</a>
</HoverCard>Props
| Name | Type | Default | Description |
|---|---|---|---|
content required | ReactNode | — | Rich card content shown on hover/focus. |
children required | ReactElement<{ 'aria-describedby'?: string; onMouseEnter?: (e: React.MouseEvent) => void; onMouseLeave?: (e: React.MouseEvent) => void; onFocus?: (e: React.FocusEvent) => void; onBlur?: (e: React.FocusEvent) => void; }> | — | The trigger element. It receives hover/focus handlers and `aria-describedby`; it must be a focusable element so the card is reachable by keyboard. |
placement | HoverCardPlacement | bottom | Side the card opens on. @default 'bottom' |
openDelay | number | 200 | Delay before opening, in ms. @default 200 |
closeDelay | number | 150 | Delay before closing, in ms. @default 150 |
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Initial open state (uncontrolled). @default false |
onOpenChange | (open: boolean) => void | — | Called when the open state changes. |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.