Hover Card

Hover Card base prototype

Base Hover Card composes Root, Trigger, and Content. Root supports controlled or uncontrolled open state, openDelay, closeDelay, and openChange; Content uses asOverlay plus asTransition and detaches only after leave completes. Content uses a logical-owner-preserving Portal, fixed positioning, side/align, numeric offsets, and collision handling. Arrow, forceMount, custom collision boundaries, sticky positioning, and detached-anchor hiding remain extensions.

Interaction contributions are view-scoped: removing Trigger or Content withdraws only that part’s current hover/focus contribution. Retained view remounts start without old hover. The Root still applies closeDelay and emits openChange; a controlled owner may decline that request.

A new Focus transition observed while a remount is becoming ready is published after the Trigger owner is ready. An unchanged retained focused=true is not replayed; canceled mounts and disabled/terminal teardown discard unpublished observations.

The draft Root exposes the typed cooperation method releaseInteraction(part, contributionId): boolean, where part is 'trigger' | 'content' and the ID is a positive safe integer unique across publishers and view generations. Trigger/Content borrow it from their same-domain Root before removal. Matching current IDs retire once; invalid, stale, or repeated IDs return false without changing Context or restarting a timer. Normal application visibility control continues through open, openHoverCard, close, and toggle. This additive cooperation surface does not imply stable lifecycle admission or complete host/native coverage.

Web Components React Vue

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

<wc-base-hover-card-root class="relative inline-flex items-start">
<wc-base-hover-card-trigger class="cursor-pointer rounded border px-3 py-1.5">
    Hover me
  </wc-base-hover-card-trigger>
  <wc-base-hover-card-content class="w-72 rounded border bg-white p-3 shadow">
    Base hover-card content. Pointer and focus intent use cancellable delays.
  </wc-base-hover-card-content>
</wc-base-hover-card-root>

View code