Hover Card

A preview of what a link points to, shown on hover (after half a second) and on keyboard focus.

ComponentsOverlays

Previous: Dropdown MenuNext: Menu Item

The snippet an agent gets

HoverCard.tsx
import { HoverCard, Link } from '@basiiik/ui';<HoverCard trigger={<Link href="/people/ada">Ada Lovelace</Link>}>Engineer, joined in 2024.</HoverCard>

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it ships.

  • Example values were filled in for the required prop trigger: replace them with your own.
  • Open follows hover (after openDelay) and keyboard focus, or open/defaultOpen; Closed is the default.
  • Compose with: avatar.
  • Storybook: Overlays/Hover card.