Hover Card

You might be looking for:

• Tooltip

  A short hover or focus label — no interactive content.

• Popover

  Click to open a surface with interactive content.

• Info Callout

  An info icon that opens a title and description.

• Toast

  A short message that appears, then dismisses itself.

Playground

<HoverCard> <HoverCardTrigger asChild> <span className="cursor-default border-b border-dotted border-muted-foreground/50"> US0378331005 </span> </HoverCardTrigger> <HoverCardContent side="top"> <p className="font-medium">Apple Inc.</p> <p className="text-muted-foreground">Equity</p> </HoverCardContent></HoverCard>

Usage

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@sophic/portal-ui/components/ui/hover-card";

<HoverCard>
  <HoverCardTrigger asChild>
    <span className="cursor-default border-b border-dotted border-muted-foreground/50">
      US0378331005
    </span>
  </HoverCardTrigger>
  <HoverCardContent side="top" align="start">
    <p className="font-medium">Apple Inc.</p>
    <p className="text-muted-foreground">Equity</p>
  </HoverCardContent>
</HoverCard>

Use this when an identifier needs a name, type, or a couple of extra lines. Keep interactive controls (buttons, fields) on Popover instead — hover-open surfaces should not trap a pointer for a click.

Props

HoverCardTrigger passes every prop through to Radix (asChild, …). The parts below add defaults we document.

HoverCard

HoverCardContent

Changelog

• 4 October 2026 — Frost via --popover / --popover-blur. Full notes
• 30 September 2026 — “You might be looking for” includes Toast. Full notes
• 25 September 2026 — “You might be looking for” includes Info Callout. Full notes
• 19 August 2026 — Playground exposes align (start / center / end) next to side. Full notes
• 19 August 2026 — Shared --floating-surface-shadow elevation token. Full notes
• 19 August 2026 — Docs page added (was in the library undocumented). Full notes
• 19 August 2026 — “You might be looking for” map to Tooltip and Popover. Full notes
• 19 August 2026 — Styles live in a CSS module; look unchanged. Full notes