Popovers

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.

<button class="btn btn-secondary" type="button" commandfor="popover-titled-panel" command="toggle-popover">Park fee</button>
<div id="popover-titled-panel" class="popover" popover role="dialog" aria-labelledby="popover-titled-title">
	<div class="popover-header" id="popover-titled-title">North Bay marine park</div>
	<div class="popover-body">The fee is paid in cash at the pier and is not part of the tour price. <a href="#popover-titled">The park rules</a></div>
</div>

Only a body

Without a title the panel is its text alone.

<button class="btn btn-secondary" type="button" commandfor="popover-body-panel" command="toggle-popover">Pickup time</button>
<div id="popover-body-panel" class="popover" popover>
	<div class="popover-body">The driver comes 15 minutes before the time on the voucher.</div>
</div>

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.
• js/menu-place.js keeps the panel beside its button where an engine cannot anchor it.

Tokens

From 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