Popover · hover card

Panels anchored to a trigger — click dialogs with a header and footer, hover cards, focus hints and signal-driven ones — placed on any side, flipped and shifted to fit, with an arrow that points at the trigger.

Click · a small dialog — focus moves in, Tab stays inside, Esc gives it back

Sides · flipped and slid to stay on screen

Hover cards · focus · a signal

Written by @ada and reviewed by @grace.

Usage

JavaScript

import { signal, html } from "./index.js";import { Popover, HoverCard } from "./components/popover.js"; // click (default): a light dialog with a header and footerPopover({ trigger: Button({ label: "Share" }), title: "Share", description: "Anyone with the link can view.",          children: html`<input value=${link}>…`, footer: html`…`, width: 320 }) // placement "top" | "right" | "bottom" | "left", align "start" | "center" | "end"Popover({ trigger, children, placement: "bottom", align: "end", arrow: false }) // openOn "hover" | "focus" | "manual" — and a signal to drive itHoverCard({ trigger: html`<a href="/u/ada">@ada</a>`, children: profileCard })const open = signal(false);Popover({ openOn: "manual", open, trigger, children })// portalled (never clipped), follows its trigger, Esc / outside click close it