The popoverTargetElement
property of the HTMLButtonElement
interface gets and sets the popover element to control via a button.
It is the JavaScript equivalent of the popovertarget
HTML attribute.
The popoverTargetElement
property of the HTMLButtonElement
interface gets and sets the popover element to control via a button.
It is the JavaScript equivalent of the popovertarget
HTML attribute.
A reference to a popover element in the DOM.
This example shows the basic use of the popover API, setting a <div>
element as a popover, and then setting it as the popoverTargetElement
of a <button>
. The popover
attribute is set to "manual"
, so the popover must be closed using a button, and not "light dismissed" by selecting outside the popover area.
First we define an HTML <button>
element that we will use to show and hide the popover, and a <div>
that will be the popover. In this case we don't set the popovertargetaction
HTML attribute on the <button>
or the popover
attribute on the <div>
, as we will be doing so programmatically.
html
<button id="toggleBtn">Toggle popover</button> <div id="mypopover">This is popover content!</div>
The JavaScript code first gets a handle to the <div>
and <button>
elements. It then defines a function to check for popover support.
js
const popover = document.getElementById("mypopover"); const toggleBtn = document.getElementById("toggleBtn"); // Check for popover API support. function supportsPopover() { return HTMLElement.prototype.hasOwnProperty("popover"); }
If the popover API is supported the code sets the <div>
element's popover
attribute to "auto"
and makes it the popover target of the toggle button. We then set the popoverTargetAction
of the <button>
to "toggle"
. If the popover API is not supported we change the text content of the <div>
element to state this, and hide the toggle button.
js
if (supportsPopover()) { // Set the <div> element to be an auto popover popover.popover = "auto"; // Set the button popover target to be the popover toggleBtn.popoverTargetElement = popover; // Set that the button toggles popover visibility toggleBtn.popoverTargetAction = "toggle"; } else { popover.textContent = "Popover API not supported."; toggleBtn.hidden = true; }
Note: A popover element is hidden by default, but if the API is not supported your element will display "as usual".
You can try out the example below. Show and hide the popover by toggling the button. The "auto" popover can also be dismissed by selecting outside the bounds of the popover text.
Specification |
---|
HTML Standard # dom-popovertargetelement |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
popoverTargetElement |
114 | 114 | 114 | No | 100 | 17 | 114 | 114 | No | No | 17 | No |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/popoverTargetElement