Introducing the Popover API

Una Kravets introduces a new set of declarative HTML APIs for building popovers, which are now available in Chromium 114. These APIs allow developers to build popovers with all the necessary features without using JavaScript. The article covers the following topics:

• The popover attribute: This attribute adds a popover to an HTML element, and its value specifies the ID of the popover content.
• Defaults and overrides: By default, a popover opens and closes when its anchor element is clicked. Developers can add a close button using the close attribute, which specifies the ID of the popover to close. The auto attribute automatically closes other auto popovers when a new one is opened, but others types of elements are not closed.
• Auto versus manual popovers: The auto attribute is a shortcut for data-popover-auto. Manual popovers require JavaScript to open and close.
• Styling popovers: Developers can style popovers like any other HTML element. Popovers have a 2px border by default and are centered on the page.
• The difference between a popover and a dialog: Popovers and dialogs have different user experiences. Popovers require no explicit user interaction to close, while dialogs require it. The article provides code snippets for building a dialog-like popover.
• Interactive entry and exit: This feature is currently in development, but it allows developers to add animations to popovers when they open and close.
• Anchor positioning: Developers can anchor a popover to the baseline of the anchor toggle.

Overall, the Popover API provides a simpler, more accessible way for developers to add popovers to their websites without relying on JavaScript.