An API that can be used to build transient user interface (UI) elements that are displayed on top of all other web app UI. These include user-interactive elements like action menus, form element suggestions, content pickers, and teaching UI. This API uses a new `popover` content attribute to enable any element to be displayed in the top layer. This is similar to the <dialog> element, but has several important differences, including light-dismiss behavior, popover interaction management, animation and event support, and the lack of a "modal" mode.
When building a web application, there are many cases in which an author needs to create transient user interface (UI) elements that are displayed on top of all other web app UI. These include user-interactive elements like action menus, form element suggestions, content pickers, teaching UI, and the listbox portion of a <select> control. These paradigms will be collectively referred to as popovers. For many such use cases, it is incumbent upon the author to handle the popover’s styling, positioning and z-index stacking, focus management, keyboard interactions, and accessibility semantics. Because no platform-native solutions exist to comfortably handle all these use cases, individual authors and framework developers must continuously re-write the same classes of controls. This results in duplicative work for the web development community, and inconsistent experiences for users of these web applications. The web platform can be extended such that authors can get popover interactions and styling “for free”, but have enough flexibility to support their individual use cases.
Explainers: https://open-ui.org/components/popup.research.explainer