Popover

Non-modal floating panel anchored to a trigger. Four positions: top, bottom, left, right. Use for quick supplementary info, tool panels, or simple actions that don't warrant a full modal. Dismisses on outside click, or on Esc while focus is inside .lb-popover-host.

a11y (built in): LB.Popover wires the pair on init — the trigger gets aria-haspopup="dialog" + aria-expanded + aria-controls (the panel id is minted if you don't supply one), and the panel gets role="dialog" with aria-modal="false" — this one is deliberately non-modal. Focus is neither moved nor trapped: the panel follows its trigger in DOM order, so Tab walks straight into it, Esc closes while focus is anywhere inside .lb-popover-host, and a mousedown outside closes it. Opening is an opacity-only fade — nothing travels.

Usage: Everything lives in one wrapper: .lb-popover-host with data-lb-popover, containing a .lb-popover-trigger (stack it with normal .lb-btn classes) followed by its .lb-popover panel with one position modifier (.lb-popover--top/bottom/left/right). Author the panel with inline display:none as the demo does — the stylesheet never hides it, and init's own hiding only lands at DOMContentLoaded; auto-init then wires the trigger click to toggle, with no ids to manage. It dispatches no CustomEvents and has no public open/close methods; the only JS hook is the onOpenChange(open) callback, so when you need to react, assign host._lbPopover = new LB.Popover(host, { onOpenChange }) before DOMContentLoaded and the auto-init sweep will skip that host. destroy() removes the document-level outside-click listener when you tear the host down.


Popover Demo

Popover Title
This is the popover content. Click the trigger or press Escape to close.