Popover
Limited availability
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.
This feature is not Baseline because it does not work in some of the most widely-used 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 promises, allowing us to react to state changes and coordinate animations. 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;Browser support for the Popover API is growing. Chrome already supports it, and Safari has implemented the feature behind a flag. As adoption increases, we can expect this native solution to become the standard way of creating overlay UI elements on the web.
