Popover
A click- or hover-triggered floating panel for rich contextual content, menus, or previews — richer than a tooltip.
Notifications
You have 3 unread messages waiting in your inbox.
API
All inputs and configuration options for zyra-popover.
| Prop | Type | Default | Description |
|---|---|---|---|
position | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | Placement of the panel relative to the trigger |
trigger | 'click' | 'hover' | 'click' | Interaction that opens the panel |
closeOnOutsideClick | boolean | true | Closes the panel when clicking outside of it |
Tokens
CSS custom properties zyra-popover reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Background--zyra-color-surface-dropdown | var(--zyra-color-card-bg) | Fill color of the panel and its directional arrow. |
Text--zyra-color-foreground | var(--zyra-color-text) | Base text color inside the panel. |
Border--zyra-color-border-color | var(--zyra-color-border) | Border color of the panel. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Panel is rendered with role="dialog" and a unique id
- Escape and outside-click both dismiss the panel when using the click trigger