Popover
Popovers are overlays that are displayed above other elements and could be used for tooltips, notification messages, navigation drawers, date pickers, and other things.
Popover API
The Popover API adds popovers to the Web Platform [MDN, whatwg/html#7785].
Among other things, it consists of the
popover attribute [MDN],
:popover-open pseudo-class [MDN, spec],
togglePopover() method [MDN],
and both the beforetoggle [MDN]
and toggle [MDN] events.
Resources:
- open-ui.org/components/popup.research.explainer
- developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence
- developer.chrome.com/docs/web-platform/popover-api
- github.com/oddbird/popover-polyfill
- github.com/whatwg/html/pull/8221
- caniuse.com/mdn-api_htmlelement_popover
- hidde.blog/popover-accessibility
The Popover API was initially called Popup API, but then renamed due to naming conflicts [whatwg/html#7785, openui/open-ui#627].
The popover functionality is intentionally provided as an attribute instead of, for example, an element [open-ui.org].