Popover
Popover is a native web component that displays a floating panel anchored to its trigger, built on the native Popover API (top layer, light dismiss, and ESC included) with CSS anchor positioning. Use it to show contextual content on demand, such as help, action menus, or detail cards. Control positioning with the placement attribute, and open or close it programmatically with the show() and hide() methods.
Preview
<pura-popover placement="bottom">
<button slot="trigger">More information</button>
<strong>Pro plan</strong>
<p>Includes unlimited projects, priority support, and advanced reports.</p>
</pura-popover>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
placement | "bottom" | "top" | "left" | "right" | bottom | Side of the trigger where the panel is positioned. |
open | boolean | false | Reflects and controls the open state of the panel; present when visible. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/popover.js"></script>import "./pura/lib/popover.js";