# Popovers A small panel that opens beside its button and holds more than a label: a title, a few lines of text, a link. A click outside or `Esc` closes it; the page under it stays usable. ## Examples `popover` on the panel, `popover-header` on its title, `popover-body` on its text. The button opens it with `commandfor` and `command="toggle-popover"`; the panel stands below the button, its start edge on the button's, and turns above or across where there is no room. ```html ``` ### Only a body Without a title the panel is its text alone. ```html ``` ## Keyboard and accessibility - The panel comes right after its button in the page, so a screen reader reads it there and `Tab` from the button moves into it. Opening it moves no focus; `Esc` closes it and brings focus back to the button. - The button says whether the panel is open: the browsers set `aria-expanded` for a button with `commandfor`, and `js/commands.js` sets it in Firefox, which does not. - A panel with a title and a link or a field in it is `role="dialog"`, named by its title in `aria-labelledby`. A panel of words only has no role. - Nothing that must be read to use the screen lives only in a popover; a choice that needs an answer is a [dialog](dialog.md). - `js/menu-place.js` keeps the panel beside its button where an engine cannot anchor it. ## Tokens From [`css/components/popover.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/popover.css), which declares no custom property of its own. It reads the theme's `--redz-space-4`, `--redz-border`, `--redz-radius-12`, `--redz-bg-raised`, `--redz-shadow-2`, `--redz-text`, `--redz-fs-14`, `--redz-space-12`, `--redz-space-16`, `--redz-space-8`, `--redz-text-muted`. ## From Bootstrap 5.3 | Bootstrap 5.3 | REDZ.UI | Change | Note | | --- | --- | --- | --- | | `bs-popover-auto` | - | remove | no arrow: anchor positioning places and flips the panel | | `bs-popover-bottom` | - | remove | no arrow: anchor positioning places and flips the panel | | `bs-popover-end` | - | remove | no arrow: anchor positioning places and flips the panel | | `bs-popover-start` | - | remove | no arrow: anchor positioning places and flips the panel | | `bs-popover-top` | - | remove | no arrow: anchor positioning places and flips the panel | | `popover-arrow` | - | remove | no arrow: anchor positioning places and flips the panel | | `data-bs-toggle="popover"` | `commandfor="ID" command="toggle-popover"` | trigger | the panel is a