HTMLElement: hidePopover() method
{{APIRef("Popover API")}}
The hidePopover() method of the {{domxref("HTMLElement")}} interface hides a popover element (i.e., one that has a valid popover attribute) by removing it from the {{glossary("top layer")}} and styling it with display: none.
When hidePopover() is called on a showing element with the popover attribute, a {{domxref("HTMLElement/beforetoggle_event", "beforetoggle")}} event will be fired, followed by the popover being hidden, and then the {{domxref("HTMLElement/toggle_event", "toggle")}} event firing. If the element is already hidden, an error is thrown.
Syntax
hidePopover()
Parameters
None.
Return value
None ({{jsxref("undefined")}} ).
Exceptions
InvalidStateError{{domxref("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
{{EmbedLiveSample("Hiding a popover","100%",100)}}
Specifications
{{Specifications}}
Browser compatibility
{{Compat}}