Popover API

Understand the topic

The Popover API can show temporary non-modal content in the browser top layer. Use a popover attribute on the target and popovertarget on its control button. An automatic popover supports light dismissal and keyboard dismissal in supporting browsers. It is not a modal dialog; use dialog with appropriate modal behavior when the rest of the page must become unavailable.

Worked example

<button type="button" popovertarget="help">Registration help</button>
<div id="help" popover>
  <h2>Before registering</h2>
  <p>Have your contact details ready.</p>
  <button type="button" popovertarget="help" popovertargetaction="hide">Close</button>
</div>

The matching id connects the trigger to the popover. Older browsers need a fallback, such as keeping essential help text available elsewhere.

Practice

Write a button that explicitly hides a popover with id tips.

<button type="button" popovertarget="tips" popovertargetaction="hide">Close tips</button>

Common mistake

Do not assume a popover blocks interaction with the rest of the page. Popovers are non-modal.

HTML documentation