Overlays
Popover
Lightweight contextual options anchored to a trigger.
Examples
Non-modal: Esc and outside click close it and return focus
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Trigger | Button with aria-expanded | Required |
| 2 | Surface | Max height 480px, then scrolls | Required |
| 3 | Content | Interactive allowed | Required |
Specifications
| Max height | 480px, then an internal scroll track |
|---|
Interaction
| Key | Result |
|---|---|
| Enter Space | Opens from the trigger |
| Tab | Moves into and through the popover, then on |
| Esc | Closes, focus returns to trigger |
| Trigger | Response |
|---|---|
| Click | Toggles |
| Outside click | Closes |
| Position | Flips to stay inside the viewport |
Accessibility
role · dialog (non-modal)
2.1.1Keyboard2.4.3Focus Order4.1.2Name, Role, Value
| Requirement | How Rig meets it |
|---|---|
| Trigger | aria-expanded and aria-controls |
| Role | role="dialog" or group with an aria-label |
| Not a tooltip | Use it when content is interactive or longer than a sentence |
| Focus | Not trapped; leaving it closes it |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Keep to one task | Do not use for long forms (use Dialog) |