Hover Card
A Hover Card shows users a preview of a link’s target while the pointer or keyboard focus rests on the link.
When to Use
- to show a few facts about a record on a link to it, such as a client’s name, before users follow the link
- for content that the linked page repeats, as a tap doesn’t open the card and screen readers don’t announce it
When Not to Use
- to name a control (use a Tooltip)
- for content that contains a control (use a Popover)
- for content that users on a touch screen need (use a Popover)
See Popover for a comparison of the Popover, the Tooltip, and the Hover Card.
Anatomy
| Element | Usage |
|---|---|
| Trigger | Required |
| Popup | Required |
HoverCardContent renders the portal, the positioner, and the popup. The popup is 256px wide. There is no title or description part, so you lay out the content yourself.
Behavior
A Hover Card responds to a pointer and to keyboard focus. A tap doesn’t open it, and a click follows the link.
By default, the card opens 600ms after the pointer or keyboard focus lands on the link. It closes 300ms after the pointer moves away, when users press Escape, and when focus moves to another element. To change either delay, set delay and closeDelay on HoverCardTrigger.
Position
By default, the card opens below the link. If the card doesn’t fit there, Base UI moves it to another side. To change the position, set side, sideOffset, align, and alignOffset on HoverCardContent.
Accessibility
Only the link is exposed to assistive technology. Base UI sets no role on the card, and no attribute connects the card to the link, so screen readers announce the link alone. Focus never moves into the card. Use a Hover Card only for content that the linked page repeats.
Requirements
Avoid placing a control in a Hover Card, as Tab never moves focus into the card and keyboard users can’t reach the
control, which WCAG 2.2 SC 2.1.1 Keyboard doesn’t allow. HoverCardTrigger needs an href so that keyboard users can open
the card. If it has no href, the a can’t receive focus, and the card opens for a pointer only.
Installation
npx shadcn@latest add @summit/hover-cardUsage
HoverCardTrigger renders the link and has no styles of its own.
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
<HoverCard>
<HoverCardTrigger href="/clients/luma-architects">Luma Architects</HoverCardTrigger>
<HoverCardContent>
<p className="font-medium">Luma Architects</p>
<p className="text-muted-foreground">Client since 2024, with three active projects.</p>
</HoverCardContent>
</HoverCard>;API Reference
The parts accept the props of their matching parts in Base UI’s Preview Card, where HoverCardContent is PreviewCard.Popup. See the Base UI Preview Card documentation for delay, closeDelay, open, and onOpenChange.
HoverCardContent
| Prop | Type | Default | Description |
|---|---|---|---|
side | 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end' | 'bottom' | The side of the link the card opens on |
sideOffset | number | OffsetFunction | 4 | The gap between the link and the card, in pixels |
align | 'start' | 'center' | 'end' | 'center' | The edge of the link the card lines up with |
alignOffset | number | OffsetFunction | 4 | A shift along that edge, in pixels |