Popover API
A popover displays supplementary content above the normal page layers. Native HTML can connect a trigger button to that content without a custom show-and-hide script.
How it works
- Give the popover an id and connect it with a button’s popovertarget attribute. The popover attribute’s auto state supports light dismissal.
- An auto popover can normally be dismissed by clicking outside it or pressing Escape. It is not automatically a modal dialog that blocks the rest of the page.
- Use an appropriate semantic element for the content and test focus behaviour. A popover is a display mechanism, not a complete accessible menu implementation by itself.
A practical example
<button type="button" popovertarget="booking-help">Booking help</button>
<div id="booking-help" popover>
<h2>Before booking</h2>
<p>Choose one session and read its equipment list.</p>
<button type="button" popovertarget="booking-help" popovertargetaction="hide">Close help</button>
</div>
In a browser supporting this feature, the trigger opens the help content and the close button hides it. Test it in a normal page because the restricted preview removes these interaction attributes.