dom-examples

MDN Popover API examples

This set of examples demonstrates usage of the Popover API (also see the specification).

• Basic declarative popover example: Demonstrates a basic auto state popover.
• Blur background popover example: Shows how you can add styling to the content behind the popover using the ::backdrop pseudo-element.
• Multiple auto popovers example: Demonstrates that, generally, only one auto popover can be displayed at once.
• Multiple manual popovers example: Demonstrates that multiple manual popovers can be displayed at once, but they can’t be light-dismissed.
• Nested popover menu example: Demonstrates the behavior of nested auto state popovers.
• popover=”hint” example: This example shows how to use the popover="hint" value to create tooltip popovers that show on button mouseover and focus, without dismissing the auto popovers shown when the buttons are clicked on. The hint popovers are controlled via JavaScript.
• Popover positioning example: An isolated example showing CSS overriding of the default popover positioning specified by the UA sylesheet.
• Toggle help UI example: Shows the basics of using JavaScript to control popover showing and hiding.
• Toast popovers example: Illustrates how to make a simple system of “toast” notifications with popovers, which automatically hide again after a certain time.

Accessibility notes

Some of these examples are not fully accessible; they were written to show how the Popover API behaves. The following notes comment on their accessibility status.

• The blur background example only adds a visual effect with ::backdrop. The popover is still non-modal, so the content behind it is not made inert and remains focusable and available to assistive technology. If the rest of the page should be inert, use a modal <dialog> opened with showModal() instead.
• The nested popover menu example is a set of nested lists of links; it doesn’t have menu semantics (provided by ARIA roles such as menu or menu keyboard handling.
• The toast popovers example copies each new toast’s message into a visually hidden <output> element. This element has an implicit ARIA status role, which makes it a live region, so screen readers announce it; this is based on the status message example in the HTML specification. The toasts themselves are kept outside the <output>, because when several are shown at once some browsers re-announce all of them on every change. Frequent announcements can be disruptive, so consider how often your notifications appear.

See Popover accessibility features for what the API does provide.

This site is open source. Improve this page.