Composite
Popover Requires JS
A floating panel anchored to a trigger. Holds richer content than a Tooltip — small forms, action menus, settings panels — with full keyboard navigation. Built on the native Popover API where supported.
About
Overview
Popovers open on click (not hover) and stay open until the user dismisses them. Use them for short forms, mini settings panels, or contextual choices that don't warrant a full Dialog. The trigger is always a button; the content can be anything keyboard-friendly.
Popover vs Dialog vs Tooltip. Tooltip = passive hint on hover. Popover = small interactive panel anchored to a trigger. Dialog = modal that blocks the rest of the page.
Live
Demo
<ren-popover>
<button slot="trigger">Filters</button>
<div slot="content" role="dialog" aria-label="Filters">
<!-- form, checkboxes, etc. -->
</div>
</ren-popover>Reference
API
| Class | Effect |
|---|---|
.ren-popover | The floating panel. Card-like surface, shadow, padding. |
.ren-popover-arrow | Optional arrow pointing at the trigger. |
Web Component attributes
| Attribute | Type | Default | Notes |
|---|---|---|---|
placement | "top" | "right" | "bottom" | "left" | "bottom" | Side relative to the trigger; auto-flips when there isn't room. |
open | boolean | false | Programmatically toggle open state. |
Inclusive by default
Accessibility
- Trigger has
aria-haspopup="dialog"andaria-expandedkept in sync. - Open: focus moves to the first focusable element inside the popover.
- Close: focus returns to the trigger.
- Esc closes the popover. Click outside also closes.
Patterns
Examples
Quick filters panel
<ren-popover>
<button slot="trigger" class="ren-btn ren-btn-secondary">Filters</button>
<form slot="content">…</form>
</ren-popover>