Popover

Show anchored, non-modal supporting content.

Live example

A reviewed public example, isolated from this page.

import { Popover } 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.

content<div>
The [popover] panel, anchored to its trigger; a non-modal role=dialog (APG Dialog pattern) that carries the side/align/open styling contract and animates via @starting-style.
ARIA role: dialog
description<p>
Optional supporting text registered into the panel's aria-describedby without dangling references.
Uses native semantics
title<h2>
Heading registered as the panel's accessible name; the APG Dialog pattern requires this or an explicit label.
Uses native semantics
trigger<button>
Invoker button; opens the content declaratively via popoverTarget, advertises the dialog popup, and carries the per-instance anchor-name.
Uses native semantics