hp-popover

Anchored floating panel — click a trigger to open a panel positioned against it. Side / align preference with automatic flip on overflow, click-outside and Escape dismiss, focus restoration to the trigger on close. Unlike <hp-tooltip>, the panel body can contain focusable controls.

Examples

API

Intent

Changelog

open

Quick info

Anchored to the trigger; flips if the viewport edge gets in the way.

<body> <hp-popover side="bottom" align="start"> <hp-button>open</hp-button> <div slot="content"> <strong>Quick info</strong> <p>...</p> </div> </hp-popover> </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`side`	`side`	`FloatingSide`	`"bottom"`	Preferred side relative to the trigger.
`align`	`align`	`FloatingAlign`	`"center"`	Alignment along the chosen side.
`offset`	`offset`	`number`	`8`	Pixel gap between trigger and panel. Default 8.
`open`	`open`	`boolean`	`false`	Reflect open state. Setting `open` programmatically opens / closes.

Events

Event	Type	Description
`hp-popover-open`	`CustomEvent`	When the panel opens
`hp-popover-close`	`CustomEvent`	When the panel closes

Slots

Slot	Description
`(default)`	Trigger element (first child)
`content`	Panel body

CSS Parts

Part	Description
`panel`	The floating panel element

Accessibility

Trigger auto-stamps aria-haspopup="dialog" and toggles aria-expanded. Panel exposes role="dialog". Click outside or Escape dismisses; focus returns to the trigger on close (when focus was inside the panel).