--- title: Popover description: Floating content anchored to a trigger. --- > LoamUI documentation, generated from the same source as the live page — > treat it as authoritative for `@loamui/core`. # Popover A click-triggered floating panel, composed from parts and rendered in the browser's top layer via the native popover attribute. ## Import ```tsx import { Button, Field, Input, Popover } from "@loamui/core"; ``` ## Usage ### Basic usage Compose the panel from parts. In browsers with the popover attribute and anchor positioning, the top layer, light dismiss and Escape come from the browser: no z-index, no portal, no document listeners; elsewhere a lean wrapper-anchored fallback re-implements the same behavior. ```tsx Toggle Anchored panel Rendered in the browser's top layer. Click outside or press Escape to close. ``` ### With form content Popovers can hold interactive content. Compose freely: parts can be reordered, styled, or omitted. ```tsx Add product
e.preventDefault()}> Name Price
``` ### Substituting the trigger element The built-in trigger is a LoamUI Button. To use a different element, pass it via render; the wiring (popovertarget, aria-expanded, anchor name) merges onto it. ```tsx ⚙} /> … ``` ## When to use it - For small, contextual panels of supplementary content or actions anchored to a trigger: filters, quick settings, action menus. - When the user should be able to dismiss casually (click away) without losing surrounding page context. ## When not to - For blocking, must-complete tasks or destructive confirmations, use Modal, which traps focus. - For a short text label describing a control, use Tooltip. - For disclosure of inline page content, use the Details component (a native
), or plain layout. ## How it works ### Light dismiss is the contract A popover closes on outside click and Escape; that is what distinguishes it from Modal. Never put an action with consequences inside one: a surface the user can dismiss by accident must only ever hold things that are safe to abandon. ### The trigger announces what it opens Popover.Trigger renders aria-haspopup="dialog" and aria-expanded, and closing returns focus to it. Keep the trigger a real button: moving the popover behind a hover or a bare span breaks the promise those attributes make to screen-reader users. ### Card-sized at most A popover earns its place when it holds a handful of controls: a filter set, a quick form. When the content wants headings or scrolling, it stops being glanceable and starts being a page in the wrong place; move it to a Modal or the page itself. ## Accessibility - Where the popover attribute and anchor positioning are both supported, the browser provides top-layer rendering, light dismiss and Escape; other browsers get a wrapper-anchored fallback with the same behavior re-implemented in a few lines of JS, a deliberate no-polyfill, progressive-enhancement trade-off (see the browser support policy in CONTRIBUTING). - Dialog semantics match what aria-haspopup="dialog" promises screen-reader users: opening moves focus into the panel and closing returns it to the trigger. - Trigger is a real