Actions & Overlays

Popover

Floating content anchored to a trigger.

stableEnhancer: enhancePopoverBuilt on [popover]hydrateless/popover.css

Floating content anchored to a trigger, built on the native Popover API. A button with popovertarget opens it with no JavaScript; the browser provides the top layer, light dismiss, and Esc, and CSS anchor positioning places it. The enhancer mirrors aria-expanded onto the invokers, adds optional hover triggering, runs a JS positioning fallback (kept in sync on scroll and resize) where anchor positioning is missing, and exposes the controlled API.

Popover

Click outside or press Esc to dismiss. Focus returns to the invoker on close.

Live

Popover content rendered in the top layer.

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhancePopover } from '@hydrateless/enhancers/popover';

const handle = enhancePopover(document);
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
open	boolean	Not set	Controlled visibility; pair with `onOpenChange` (Vue: `v-model:open`, Svelte: `bind:open`).
defaultOpen	boolean	false	Uncontrolled initial visibility.
onOpenChange	(open: boolean) => void	Not set	Called after the popover shows or hides, including light dismiss.
placement	Placement	'bottom'	Preferred side relative to the trigger.
hover	boolean	false	Also open on pointer hover and focus, with a short grace period before closing.

Events and callbacks

Event / Callback	Payload	Description
hl:open-change	{ open: boolean }	Fires whenever the popover opens or closes (also the `onOpenChange` callback).

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-surface	Popover background.
--hl-border	Popover border.
--hl-overlay-shadow	Popover elevation.

Accessibility

• The native Popover API provides light dismiss, Esc, and top-layer stacking; focus returns to the invoker on close.
• Invokers gain aria-expanded and aria-controls so the relationship is announced.

Related

TooltipA text hint shown on hover and focus.Dropdown MenuA button-triggered menu following the WAI-ARIA menu button pattern.ModalA dialog overlay built on the native <dialog> element.