UI Patterns
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.
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:
- developer.chrome.com/blog/introducing-popover-api
- 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
- open-ui.org/components/popup.research
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].
Anchor Positioning
Related: popover, tooltip, menu.
Anchor positioning makes it possible to position an element relative to another element. This is useful for many UI components such as popover, tooltip, picker, etc.