web api instance method
HTMLElement: hidePopover() method
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.
Syntax
hidePopover()
Parameters
None.
Return value
None (undefined).
Exceptions
InvalidStateErrorDOMException- : Thrown if this method is called while another popover is already in the process of being shown or hidden (e.g., within a
beforetoggleevent listener).
- : Thrown if this method is called while another popover is already in the process of being shown or hidden (e.g., within a
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
Interactive exampleOpen the canonical MDN source to run this embedded demo.
Specifications
SpecificationsStandards references are available on the canonical MDN page.
Browser compatibility
Browser compatibilityCompatibility data is available on the canonical MDN page.