SlowlyPopover
Rich content in a small panel, opened from a button.
The Popover block shows content in a small panel anchored to a button, opening beside or below it on click. It is lighter than a modal, the page stays put behind it, which suits menus, extra detail, and small forms.
Adding one
- Select the section or container to hold it.
- Open the inserter and search "popover".
- Pick the Popover block.
The trigger button and the panel are both yours to style. Add any blocks inside the panel, headings, text, a form, a list of links.
Settings
In the popover's own panel. Appearance lives in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Trigger | How the panel opens: click (default) or hover | Hover suits tooltip-style hints; click is better for anything interactive inside the panel |
| Placement | Which side of the trigger the panel appears on | The panel opens beside the trigger by default; change this if the panel clips the viewport edge |
| Shift | Keeps the panel in view by nudging it along its axis (on by default) | Leave on; turn off only if a fixed position is required |
| Flip | Moves the panel to the opposite side when it would overflow (on by default) | Leave on; turn off if the flip behaviour conflicts with your layout |
Styling
The trigger button and the panel are separate elements inside the block, so style them separately in the shared design panel. The panel's open state is a good candidate for a transition in the states panel.
Accessibility
The trigger button needs a label that describes what it opens, so a screen-reader user knows what to expect before activating it. If the trigger has no visible text (an icon only), add an aria-label in the block's HTML attributes. Keep interactive elements inside the panel keyboard-reachable: anything a mouse user can click, a keyboard user should be able to tab to and activate.