Popover
Non-modal panel anchored to a trigger for rich hints, onboarding steps or small forms.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
Invite your team
Collaborate on projects in real time. You can change permissions any time.
<div class="px-dropdown" style="padding-bottom:180px">
<button type="button" class="px-btn px-btn--secondary-gray" data-px-popover aria-controls="pv-1"><svg class="px-icon" aria-hidden="true">…</svg>Invite</button>
<div class="px-popover px-popover--floating" id="pv-1" role="dialog" aria-labelledby="pv-1-t" hidden>
<p class="px-popover__title" id="pv-1-t">Invite your team</p>
<p class="px-popover__desc">Collaborate on projects in real time. You can change permissions any time.</p>
<p class="px-popover__meta">Step 2 of 4</p>
<div class="px-popover__actions"><button type="button" class="px-btn px-btn--tertiary px-btn--sm" data-px-close>Skip</button><button type="button" class="px-btn px-btn--sm" data-px-close>Next</button></div>
</div>
</div>Usage
- Popovers can hold interactive content; tooltips cannot.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>API reference
| Class / attribute | Type | Description |
|---|---|---|
data-px-popover + aria-controls | attribute | Trigger. |
px-popover · --floating | class | Panel. |
__title · __desc · __meta · __actions | class | Slots. |
Figma properties
Popover4 variants · page “Overlays”Open
Non-modal panel anchored to a trigger for rich hints, onboarding steps or small forms. Placement Bottom = popover below its trigger (arrow on top). Arrow sits at the inline-start edge, so it mirrors i…
| Property | Type | Values |
|---|---|---|
| Title | Text | “Invite your team” |
| Description | Text | “Collaborate on projects in real time. You can change permissions any time.” |
| Meta | Boolean | — |
| Actions | Boolean | — |
| Placement | Variant | Bottom Top |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-popover-background | color-surface-overlay | #ffffff |
--px-popover-radius | radius-16 | 16px |
--px-popover-padding | spacing-12 | 12px |
--px-popover-width | 320px | 320px |
Accessibility
- Escape and outside click close it.