Popup
Low-level positioned container anchored to an element.
<rhx-popup>
Examples
Positioned Container
<div style="position: relative;">
<button class="rhx-button rhx-button--neutral" id="popup-anchor"
onclick="
var p = document.getElementById('demo-popup');
p.hidden = !p.hidden;
p.classList.toggle('rhx-popup--active');
">Toggle Popup</button>
<rhx-popup rhx-anchor="#popup-anchor"
rhx-placement="bottom-start"
id="demo-popup">
<div style="padding: var(--rhx-space-md);
background: var(--rhx-color-surface);
border: var(--rhx-border-width) solid var(--rhx-color-border);
border-radius: var(--rhx-radius-md);
box-shadow: var(--rhx-shadow-lg);
min-width: 12rem;">
<p>Positioned popup content.</p>
</div>
</rhx-popup>
</div>With Arrow
<div style="position: relative;">
<button class="rhx-button rhx-button--brand" id="popup-arrow-anchor"
onclick="
var p = document.getElementById('demo-popup-arrow');
p.hidden = !p.hidden;
p.classList.toggle('rhx-popup--active');
">Toggle Popup with Arrow</button>
<rhx-popup rhx-anchor="#popup-arrow-anchor"
rhx-placement="bottom"
rhx-arrow="true"
id="demo-popup-arrow">
<div style="padding: var(--rhx-space-md);
background: var(--rhx-color-surface);
border: var(--rhx-border-width) solid var(--rhx-color-border);
border-radius: var(--rhx-radius-md);
box-shadow: var(--rhx-shadow-lg);
min-width: 12rem;">
<p>This popup has a directional arrow.</p>
</div>
</rhx-popup>
</div>Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-anchor |
string |
- |
CSS selector of the anchor element |
rhx-placement |
string |
bottom |
Position: top, bottom, left, right, bottom-start, bottom-end, top-start, top-end, left-start, left-end, right-start, right-end |
rhx-arrow |
bool |
false |
Show a directional arrow element |
Accessibility
rhx-popupis a low-level positioning utility; consumers should add appropriate ARIA roles and attributes based on their use case.- For menus, add
role="menu"and connect to the trigger witharia-controls. - For tooltips or dialogs, use the higher-level
rhx-popoverorrhx-tooltipcomponents instead. - Ensure keyboard users can dismiss the popup (e.g., with
Escape) and that focus is managed appropriately.