Popover
Baseline 2025 newly available
Supported in Chrome: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Since January 2025 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Building overlay UI elements like tooltips and dropdowns has always required complex JavaScript libraries. The new HTML Popover API changes this with native browser support for floating elements.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
The Popover API introduces a new popover attribute that transforms any HTML element into a floating overlay.
The browser handles all the complex positioning, stacking order, and focus management automatically. This means we can create interactive UI elements without wrestling with z-index, click-outside handling, or managing focus states.
<button popovertarget="info">Toggle Popover</button><div id="info" popover> <p>Popover content appears above other elements</p></div>We can control popovers through two modes: auto and manual
Auto popovers dismiss themselves when clicking outside or when another auto popover opens, perfect for simple tooltips or dropdowns. Manual popovers give us more control over their behavior, useful for complex dialogs or multi-step flows.
The JavaScript API provides three methods to control popovers programmatically: showPopover(), hidePopover(), and togglePopover()
These methods return undefined and execute synchronously. The API also provides the :popover-open CSS pseudo-class for styling popovers based on their visibility state.
The Popover API represents a significant step forward in web platform capabilities. Instead of relying on complex positioning libraries or managing overlay states manually, we now have a native solution that handles these challenges elegantly. This means simpler code, better performance, and improved accessibility out of the box.
import React from 'react';
const PopoverDemo = () => ( <div className="mx-auto max-w-xl mt-5 mb-5 "> <button onClick={() => document.getElementById('settings').togglePopover()} className="px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600 transition" > Toggle Popover </button>
<div id="settings" popover="auto" className="p-6 rounded-lg shadow-lg bg-white dark:bg-gray-800 border dark:border-gray-700" > <div className="flex justify-between items-center mb-4"> <p className="text-lg font-semibold dark:text-white">What is Lorem Ipsum?</p> <button onClick={() => document.getElementById('settings').hidePopover()} className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" > Close </button> </div> <p className="text-gray-600 dark:text-gray-300"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div>);
export default PopoverDemo;The Popover API is now Baseline Widely Available (since April 2025) and supported across all major browsers, including Chrome 114+, Firefox 125+, and Safari 17+. It’s the standard way to create overlay UI elements on the web.