Hover Card

A rich preview card that appears when you hover or focus a link — native delays, keyboard support and viewport-aware flipping, all handed to the browser via an interest invoker.

interest invokersanchor positioningexit animations

PreviewCode

<p class="text-sm text-muted-foreground">
  Follow
  <a
    href="#"
    interestfor="hc-janedoe"
    class="rounded-sm font-medium text-foreground underline decoration-muted-foreground/40 underline-offset-4 transition-colors hover:decoration-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [anchor-name:--hc-janedoe]"
    >@janedoe</a
  >
  for platform CSS tips.
</p>

<div
  id="hc-janedoe"
  popover="hint"
  class="w-64 translate-y-1 scale-95 rounded-lg border border-border bg-popover p-4 text-popover-foreground opacity-0 shadow-lg transition-[opacity,translate,scale,overlay,display] transition-discrete duration-150 open:translate-y-0 open:scale-100 open:opacity-100 starting:open:translate-y-1 starting:open:scale-95 starting:open:opacity-0 [position-anchor:--hc-janedoe] [position-area:block-end_span-inline-end] [position-try-fallbacks:flip-block] mt-2 origin-top-left"
>
  <div class="flex gap-3">
    <span class="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground">JD</span>
    <div>
      <p class="text-sm leading-none font-semibold text-foreground">Jane Doe</p>
      <p class="mt-1 text-sm text-muted-foreground">@janedoe</p>
    </div>
  </div>
  <p class="mt-3 text-sm text-foreground">Design engineer. Building zero-JS UI and writing about the web platform.</p>
  <p class="mt-3 flex items-center gap-1.5 text-xs text-muted-foreground">
    <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M8 2v4"></path>
      <path d="M16 2v4"></path>
      <rect width="18" height="18" x="3" y="4" rx="2"></rect>
      <path d="M3 10h18"></path>
    </svg>
    Joined March 2024
  </p>
</div>

A hover card is a tooltip’s bigger sibling. A tooltip is a scrap of text on an icon button; a hover card is a card (an avatar, a name, a bio) surfaced from a link in running text. Rather than wire up hover state, delays and a pointer-events bridge by hand, this hands the whole job to the platform with an interest invoker.

How it works

interestfor on the link points at the card, a popover="hint" element. The browser handles showing it on hover and keyboard focus, the open/close delays, the top layer, and keeping it open while you move the cursor toward it. No group/peer wiring, no pointer-events guard.
The card declares [position-anchor:--hc-janedoe] back at the link’s [anchor-name:--hc-janedoe], so [position-area:block-end_span-inline-end] places it below and to the right.
[position-try-fallbacks:flip-block] keeps it on screen: near the bottom of the viewport the browser flips the card above the link on its own.
The entry/exit animation is the same discrete-transition pattern used across the library. @starting-style sets the opening frame, and transition-behavior: allow-discrete keeps it animating out before display flips back.

The fallback story

Interest invokers are Chromium-only for now. In other browsers the card never appears, but the link still works. If you need hover previews for everyone today, the same idea works with a group/card wrapper and group-hover/group-focus-within (see the plain-CSS tooltip for that technique), though a hand-positioned card can’t flip at a viewport edge.

Browser support

Minimum stable version per engine, resolved at build time from MDN's browser-compat-data; Baseline status from the official web-features dataset. Everything degrades gracefully — the “when missing” column is the actual behavior, not a broken page.

Feature	Chrome	Edge	Firefox	Safari	When missing
Interest invokers (interestfor + popover="hint")Limited availability	142	142	✕	✕	The hover UI simply never appears — triggers keep their aria-labels and links still navigate, so nothing is lost. If you need it everywhere today, the plain-CSS technique on the Tooltip page works in every browser.
CSS anchor positioningLimited availability	129	129	147	26	The popover opens centered in the viewport (the top-layer default) instead of attached to its trigger.
Entry/exit animations (allow-discrete + @starting-style)Baseline 2024 · newly available	117	117	129	17.5	Elements appear and disappear instantly. Nothing breaks — you just lose the animation.

† @supports cannot test at-rules, so the badge checks transition-behavior: allow-discrete, which co-shipped with @starting-style in every engine.