sprõut
ComponentsOverlays

Hover Card

A small card that previews what a link points to. It opens when the link is hovered or keyboard-focused. Use it for a profile or a page summary; the link itself must still work without it.

Hover or Tab to a name. Escape or moving away closes the card.
topAlex Meadow
rightPriya Raman
bottomJonas Becker
leftMei Tanaka

Usage

Hover card usageTSX
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@tulipfarm/sprout/hover-card";

<HoverCard>
  <HoverCardTrigger render={<a href="/people/alex" />}>
    Alex Meadow
  </HoverCardTrigger>
  <HoverCardContent side="top">
    <p className="font-medium">Alex Meadow</p>
    <p className="text-sm text-sprout-muted">
      Fictional garden project coordinator.
    </p>
  </HoverCardContent>
</HoverCard>

Pass your link or router link to HoverCardTrigger through render. Without it the trigger renders a plain a. Put a name in the first line of the card and a muted description below it.

Mentions in text

Hover cards sit inside running text. Use align="start" to line the card up with the start of the name. Long names wrap inside the 16rem card, and the card shrinks to fit narrow screens.

Priya Raman moved the spring launch to Thursday. Alex Meadow will confirm the plot assignments before then.

Notes from greenhouse-irrigation-retrofit-north-wing-2026.

API

HoverCard wraps the Base UI preview card root and takes open, defaultOpen, onOpenChange, and actionsRef.

HoverCardTrigger takes render, delay (600ms), closeDelay (300ms), and every anchor prop.

HoverCardContent renders its own portal and positioner. It takesside ("bottom"), align ("center"), sideOffset (4), alignOffset (4), collisionPadding (8), anchor, keepMounted, container, and every Base UI popup prop. Each part sets a data-slot.

Accessibility

The card opens on hover and on keyboard focus, and closes on Escape, blur, or pointer leave. Screen readers read the link, not the card, so the card should only repeat or add to what the link’s page shows.

Cards fade, scale, and slide in from their side over 120ms. Motion turns off when reduced motion is requested. In forced-colors mode the card keeps a visible border.

Theme tokens

Hover cards use --sprout-surface, --sprout-line,--sprout-text, --sprout-muted, --sprout-shadow-overlay, and the panel radius. The link uses --sprout-border for its underline and --sprout-focus for its focus ring. They need no brand color, so they look the same with the neutral and TulipFarm themes in light and dark mode.