https://developer.mozilla.org/en-US/docs/Web/API/Popover_API * Skip to main content * Skip to search * Skip to select language Open main menu * ReferencesReferences + Overview / Web Technology Web technology reference for developers + HTML Structure of content on the web + CSS Code used to describe document style + JavaScript General-purpose scripting language + HTTP Protocol for transmitting web resources + Web APIs Interfaces for building web applications + Web Extensions Developing extensions for web browsers + Web Technology Web technology reference for developers * GuidesGuides + Overview / MDN Learning Area Learn web development + MDN Learning Area Learn web development + HTML Learn to structure web content with HTML + CSS Learn to style content using CSS + JavaScript Learn to run scripts in the browser + Accessibility Learn to make the web accessible to all * PlusPlus + Overview A customized MDN experience + AI Help (beta) Get real-time assistance and support + Updates All browser compatibility updates at a glance + Documentation Learn how to use MDN Plus + FAQ Frequently asked questions about MDN Plus * Curriculum^New * Blog * Play * AI Help ^Beta Search MDN[ ]Clear search inputSearch Theme * Log in * Sign up for free 1. References 2. Web APIs 3. Popover API Article Actions * English (US) + Francais + Ri Ben Yu + hangugeo Filter sidebar[ ]Clear filter input In this article * Concepts and usage * HTML attributes * CSS features * Interfaces * Extensions to other interfaces * Examples * Specifications * Browser compatibility * See also 1. Popover API 2. Guides 1. Using the Popover API 3. Interfaces 1. ToggleEvent 4. Properties 1. HTMLButtonElement.popoverTargetAction 2. HTMLButtonElement.popoverTargetElement 3. HTMLElement.popover 4. HTMLInputElement.popoverTargetAction 5. HTMLInputElement.popoverTargetElement 5. Methods 1. HTMLElement.hidePopover() 2. HTMLElement.showPopover() 3. HTMLElement.togglePopover() 6. Events 1. HTMLElement: beforetoggle 2. HTMLElement: toggle In this article * Concepts and usage * HTML attributes * CSS features * Interfaces * Extensions to other interfaces * Examples * Specifications * Browser compatibility * See also Popover API Baseline 2024 Newly available Since April 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. * Learn more * See full compatibility * Report feedback The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript. Concepts and usage A very common pattern on the web is to show content over the top of other content, drawing the user's attention to specific important information or actions that need to be taken. This content can take several different names -- overlays, popups, popovers, dialogs, etc. We will refer to them as popovers through the documentation. Generally speaking, these can be: * modal, meaning that while a popover is being shown, the rest of the page is rendered non-interactive until the popover is actioned in some way (for example an important choice is made). * non-modal, meaning that the rest of the page can be interacted with while the popover is being shown. Popovers created using the Popover API are always non-modal. If you want to create a modal popover, a element is the right way to go. There is significant overlap between the two -- you might for example want to create a popover that persists, but control it using declarative HTML. You can turn a element into a popover ( is perfectly valid) if you want to combine popover control with dialog semantics. Typical use cases for the popover API include user-interactive elements like action menus, custom "toast" notifications, form element suggestions, content pickers, or teaching UI. You can create popovers in two different ways: * Declaratively, via a set of new HTML attributes. A simple popover with a toggle button can be created using the following code: html
Popover content
* Via a JavaScript API. For example, HTMLElement.togglePopover() can be used to toggle a popover between shown and hidden. There are also new events to react to a popover being toggled, and CSS features to aid in styling popovers. All the new features are listed below. See Using the popover API for a detailed guide to using this API. HTML attributes popover A global attribute that turns an element into a popover element; takes a popover state ("auto" or "manual") as its value. popovertarget Turns a