Hover Card

Preview supporting information on hover or focus.

Live example

A reviewed public example, isolated from this page.

import { HoverCard } from "heidi-ui";
import "heidi-ui/styles.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

close<button>
Optional native close button for press-pinned/touch cards; requests a cancellable close-press change.
Uses native semantics
content<div>
Also exported as HoverCard.Popup. Lazily mounted non-modal dialog in the top layer; remains interactive across the safe pointer corridor and stays viewport-contained after CSS-anchor collision flips.
ARIA role: dialog
description<p>
Optional supporting text registered into aria-describedby without dangling references.
Uses native semantics
title<h2>
Heading registered as the interactive preview dialog's accessible name.
Uses native semantics
trigger<button>
Native button by default; supports multiple invokers, mouse-only rest intent, immediate focus access, optional press pinning, and link-safe composition.
Uses native semantics