Element: popovershow event
Fired on the popover when it is shown.
Published on • Updated on
The popovershow
event of the Element
interface fires on a popover element when it is shown.
Syntax
Use the event name in methods like addEventListener()
, or set the equivalent event handler property.
addEventListener("popovershow", (event) => {});
onpopovershow = (event) => {};
Example
const popover = document.getElementById('my-popover');
const popoverToggleBtn = document.getElementById('my-popover-btn');
// Event listener version
popover.addEventListener('popovershow', () => {
popoverToggleBtn.textContent = 'Dismiss popover';
})
// Event handler property version
popover.onpopovershow = () => {
popoverToggleBtn.textContent = 'Dismiss popover';
}
Browser compatibility
- The Popover API is planned for launch in Chrome 110, available in stable in early February 2023 (check the Chrome Roadmap for updates).
- It is enabled by default in Chrome Canary for local testing.
- Register for the Origin Trial if you want to test it in a production environment. Read Getting started with Chrome's origin trials for more information.
- There is a polyfill available at https://github.com/oddbird/popup-polyfill.
See also
Updated on • Improve article