Actions & Overlays

Popover

Floating content anchored to a trigger.

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

Floating content anchored to a trigger. The demo uses the native Popover API where available; the enhancer adds placement and a hidden-attribute fallback for older browsers.

Popover

This uses the native Popover API. Click outside or press Esc to dismiss.

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(container, { triggerEvent, placement, defaultOpen, onOpenChange });
// 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	—	Controlled visibility; pair with `onOpenChange`.
placement	string	'bottom'	Preferred side relative to the trigger.

Events and callbacks

Event / Callback	Payload	Description
hl:open-change	{ open: boolean }	Fires whenever the popover opens or closes.

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-shadow-md	Popover elevation.

Accessibility

• The native Popover API provides light-dismiss and top-layer stacking for free.
• With the fallback, openers gain aria-expanded and aria-controls.

Related

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