Hover card

Preview Available in release assets

Offer optional compact linked context through an authored native popover while keeping activation and a full destination available to every input mode. Hover activation and command behavior are future enhancements, not shipped by this item.

Server contract

Use .thin-hover-card. The marker only styles the authored native control; no pointer, command, Escape, or focus-restoration entrypoint is shipped.

The authored popover trigger and durable subject/detail links preserve the complete information path without custom JavaScript.

<section class="thin-hover-card" aria-labelledby="person-heading">
  <h2 id="person-heading">Account reference</h2>
  <p>Read <a href="/people/ada">Ada’s full profile</a> or <button class="thin-button" data-variant="quiet" popovertarget="ada-summary" aria-describedby="ada-guidance">show a quick summary</button>.</p>
  <span id="ada-guidance" class="thin-visually-hidden">Opens on activation; hover is never required.</span>
  <aside id="ada-summary" popover data-hover-card aria-labelledby="ada-name">
    <h3 id="ada-name"><a href="/people/ada">Ada Lovelace</a></h3>
    <p>Platform owner · Chicago</p>
    <p><a href="/people/ada/activity">View recent activity</a></p>
  </aside>
</section>

Show code

<section class="thin-hover-card" aria-labelledby="person-heading">
  <h2 id="person-heading">Account reference</h2>
  <p>Read <a href="/people/ada">Ada’s full profile</a> or <button class="thin-button" data-variant="quiet" popovertarget="ada-summary" aria-describedby="ada-guidance">show a quick summary</button>.</p>
  <span id="ada-guidance" class="thin-visually-hidden">Opens on activation; hover is never required.</span>
  <aside id="ada-summary" popover data-hover-card aria-labelledby="ada-name">
    <h3 id="ada-name"><a href="/people/ada">Ada Lovelace</a></h3>
    <p>Platform owner · Chicago</p>
    <p><a href="/people/ada/activity">View recent activity</a></p>
  </aside>
</section>

Anatomy

Durable subject link
Explicit disclosure button
Native popover
Labelled summary
Durable detail links

Variants and sizes

Compact
Rich preview
Action list

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Closed (native popover)
Open by authored button (native popover)
Keyboard and touch activation (native controls)
Pointer hover (future enhancement; not shipped)
Viewport edge (logical CSS)
RTL (logical CSS)
No JavaScript (authored fallback)

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The authored button toggles a native popover. This item ships no hover listener, command handling, Escape handler, or focus-restoration logic; browser-owned popover behavior is outside the item-level contract.

Accessibility

Use an explicit labelled trigger, logical DOM order, durable links/forms, visible focus, touch-sized controls, and content that remains reachable at zoom and viewport edges. Do not put essential information behind hover alone.

Contract

DISCLOSURE

Basis

Native popover/non-modal dialog composition; explicitly not the APG Tooltip pattern

Evidence

tests/unit/library/hover-context.test.ts

API

Use .thin-hover-card. The marker only styles the authored native control; no pointer, command, Escape, or focus-restoration entrypoint is shipped.

Behavior tier: native

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The authored popover trigger and durable subject/detail links preserve the complete information path without custom JavaScript.

Assets and dependencies

/foundation.css
/components.css

Dependencies: None

Source: packages/ui/src/items/hover-context/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes

Button