FORMA Docs

Hover card

Preview a person or link on hover or focus without leaving the page.

import { HoverCard, HoverCardProfile } from "@/forma/arc/hover-card/hover-card";
Base

In FORMA

  • Liegt in kit/arc/hover-card und ist über @/forma/arc/hover-card/hover-card erreichbar.
  • Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

  • Previews of people behind mentions, avatars, or author names.
  • Link or reference previews where the click must stay free for navigation.
  • Dense lists where moving between triggers should open cards almost instantly.

When not to use

  • Use tooltip for a plain text label.
  • Use popover when the content has buttons or inputs.
  • Use user-menu for the account menu on your own avatar.

Usage

import { HoverCard, HoverCardProfile } from "@/forma/arc/hover-card/hover-card";

export function Mention() {
  return (
    <HoverCard
      content={<HoverCardProfile name="Maya Chen" role="Product designer, Payments" stats={[{ label: "Projects", value: 12 }]} />}
    >
      <button type="button">@maya</button>
    </HoverCard>
  );
}

API reference

HoverCard

A read-only preview that opens after a short hover or keyboard focus and stays open while the pointer travels into it.

PropTypeDefaultDescription
children (required)ReactElement–The trigger, such as a mention button or link. Must accept a ref and be focusable.
content (required)ReactNode–The preview. HoverCardProfile covers people.
side"top" | "bottom" | "left" | "right""bottom"Preferred side of the trigger.
align"start" | "center" | "end""start"Alignment against the trigger.
openDelaynumber500Milliseconds of hover before the first card opens.
closeDelaynumber140Grace in milliseconds after the pointer leaves.
classNamestring–Class on the card surface.

HoverCardProfile

A person preview: portrait, name, role, bio, stats, and a footer line.

PropTypeDefaultDescription
name (required)string–Full name. Initials are derived from it when there is no avatar.
rolestring–Role and team.
avatarstring | ReactNode–Portrait URL or your own image element such as next/image.
biostring–Short bio paragraph.
stats{ label: string; value: string | number }[][]Rendered as a definition list.
metaReactNode–Footer line such as location and local time.

Keyboard interactions

KeysAction
TabKeyboard focus on the trigger opens the card immediately.
EnterOpens the card without the hover delay.
EscapeCloses the card and keeps it closed while the pointer rests on the trigger.

Accessibility

  • The card has role="tooltip" and the trigger gets aria-describedby while it is open.
  • Focus never moves into the card, so keep its content read only.
  • On touch, a tap toggles the card instead of relying on hover.

Motion

  • Grows from the trigger edge: scale from 0.96 and a 4px offset on a smooth spring, with a separate fade. Mid-exit returns retarget instead of jumping.
  • Within 300ms of another card, the next opens after 80ms with a fade only. Profile rows settle in with a small stagger.
  • Reduced motion drops scale and travel and keeps a short fade.

Responsive behavior

  • The card is 18.5rem wide, capped at the space Radix reports as available or the viewport minus 24px.
  • On touch, a tap toggles the card instead of waiting for hover.
  • Long names and roles ellipsize and stats wrap onto new lines.

Performance

  • Only one hover card is open on the page, and it mounts in a portal only while open.
  • Open and close use timers, not pointer tracking loops; the profile avatar decodes async.

Notes for AI

  • Use for previews of people, links, or references where the click must stay free for navigation. Use tooltip for plain labels and popover for interactive content.
  • Only one hover card is open at a time on the page. Anything actionable belongs behind the trigger itself.

Also in overlays

  • Dialog: A focused surface for decisions that need attention.
  • Drawer: A temporary side surface for focused work.
  • Bottom sheet: A sheet that rests at a peek or full height and follows your finger.
  • Share access: A share panel: invite people as validated email chips with suggestions, change roles from a compact menu, remove with undo, switch link access and copy the link, with every change landing in place.

Guidance for AI tools

Hover card: Preview a person or link on hover or focus without leaving the page. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückBottom sheetWeiterResizable panels

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.