Geist Design System

Context Card

Tooltip

Default
Top
Bottom
Left
Right

Best Practices

When to use

  • Use Context Card to reveal entity metadata on hover or focus: a user, a deployment, a project, an API key. The trigger is usually a name link or avatar in dense data.
  • For a one-line "why" without metadata rows, use Tooltip. For long-form content, edit forms, or persistent navigation, route to a Drawer or a detail page.
  • Don’t use Context Card to surface destructive actions; the panel can dismiss on cursor exit before the user commits.

Behavior

  • Context Card opens on hover and keyboard focus and closes on cursor exit or blur. Preserve the ~150ms entry delay so it doesn’t flash on a fast mouse sweep.
  • Cap interactive content at one primary action (View Project, Open Settings). More than one CTA reads as a menu and belongs in Menu.
  • Don’t nest a Context Card inside a Tooltip or another Context Card; the second layer steals focus and traps keyboard users.

Content

  • Lead with the entity name as a Title Case heading and one identifying line in sentence case underneath (team slug, owner, deployment URL).
  • Follow with 2–4 metadata rows of Label: value. Keys are Title Case noun phrases (Last Active, Created, Plan); values follow the same formatting rules as table cells. Use the em-dash character — for unknown values, never N/A or null.
  • Don’t restate what the trigger already showed. If the row already renders the deployment URL, don’t repeat it as the first card line.

Accessibility

  • The trigger keeps its own accessible name; the card is supplementary and shouldn’t replace it.
  • Card content is reachable by keyboard once the trigger has focus; Escape closes the card and returns focus to the trigger.