HTMLElement: hidePopover() method
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.
The hidePopover()
method of the HTMLElement
interface hides a popover element (i.e. one that has a valid popover
attribute) by removing it from the top layer and styling it with display: none
.
When hidePopover()
is called on a showing element with the popover
attribute, a beforetoggle
event will be fired, followed by the popover being hidden, and then the toggle
event firing. If the element is already hidden, an error is thrown.
Syntax
hidePopover()
Parameters
None.
Return value
None (undefined
).
Exceptions
InvalidStateError
DOMException
-
Thrown if the popover is already hidden.
Examples
Hiding a popover
The following example provides functionality to hide a popover by pressing a particular key on the keyboard.
HTML
<button popovertarget="mypopover">Toggle popover's display</button>
<div id="mypopover" popover="manual">
You can press <kbd>h</kbd> on your keyboard to close the popover.
</div>
JavaScript
const popover = document.getElementById("mypopover");
document.addEventListener("keydown", (event) => {
if (event.key === "h") {
popover.hidePopover();
}
});
Result
Specifications
Specification |
---|
HTML Standard # dom-hidepopover |
Browser compatibility
BCD tables only load in the browser