Module 15: Modern Interactive HTML
The Popover API
Use the popover attribute for lightweight, browser-managed overlays such as help panels and menus.
The Popover API provides a declarative way to show and hide an element in the browser’s top layer. A simple popover can be connected to a button with popovertarget.
<button type="button" popovertarget="help-panel">What is a slug?</button>
<div id="help-panel" popover>
<p>A slug is the readable part of a URL used to identify a page.</p>
</div>
The browser handles the basic toggle behavior. Popovers can be shown automatically with popover or controlled manually with the relevant JavaScript methods and events. The API is useful for small help panels, menus, and contextual information.
A popover is non-modal by default. It does not make the rest of the document inert. A dialog can be modal and is more appropriate when the user must make a decision before returning to the page.
Use the simplest feature that matches the interaction. A native popover reduces custom positioning and visibility code, but it does not automatically make every menu accessible. Ensure the trigger has a clear name, focus behavior makes sense, and the content can be used with a keyboard.