Components

Hover card

Preview additional context on hover. Great for operator names, mission IDs, and links — anywhere the reader might want a quick lookup without navigating.

When to useto preview optional context on hover — operator profiles, mission IDs, links — without a click.

Import

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@ravnhq/efni/hover-card"

Operator preview

Assigned to Nora Adell at 04:00.

<HoverCard>
  <HoverCardTrigger>Nora Adell</HoverCardTrigger>
  <HoverCardContent side="top">
    <Avatar />
    <div>
      <p>Nora Adell</p>
      <p>Launch operator · Pad 3</p>
    </div>
  </HoverCardContent>
</HoverCard>

Accessibility

Key	Action
`Tab`	Focus the trigger — content opens on focus, same as hover.
`Esc`	Close the open card.

Opens on hover AND focus so keyboard users get the same preview.
Content is decorative — put anything actionable somewhere with a persistent surface.

Guidelines

Reserve it for supplementary context — the underlying page must still work without it.
Trigger on inline links, mission IDs, and operator names, not entire rows.
Keep the card under three lines — long content wants a Popover.

Don't

Don't put actions inside — buttons here get skipped by touch users.
Don't nest a HoverCard inside another HoverCard.
Don't use it as a tooltip for a lone icon — use Tooltip.

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the preview card is currently open.
`defaultOpen`	`boolean`	`false`	Whether the preview card is initially open. To render a controlled preview card, use the `open` prop instead.
`onOpenChange`	`((open: boolean, eventDetails: PreviewCardRoot.ChangeEventDetails) => void)`	—	Event handler called when the preview card is opened or closed.
`HoverCardContent.side`	`"top" \| "bottom" \| "left" \| "right" \| "inline-end" \| "inline-start"`	`"bottom"`	Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
`HoverCardContent.align`	`"center" \| "start" \| "end"`	`"center"`	How to align the popup relative to the specified side.
`…props`	`PreviewCardPrimitive.Root.Props`	—	Everything HoverCard passes to the element it renders.