ThepopoverTargetElement property of theHTMLInputElement interface gets and sets the popover element to control via an<input> element oftype="button".

It is the JavaScript equivalent of thepopovertarget HTML attribute.

Establishing a relationship between a popover and its invoker button using thepopoverTargetElement property has two additional useful effects:

• The browser creates an implicitaria-details andaria-expanded relationship between popover and invoker, and places the popover in a logical position in the keyboard focus navigation order when shown. This makes the popover more accessible to keyboard and assistive technology (AT) users (see alsoPopover accessibility features).
• The browser creates an implicit anchor reference between the two, making it very convenient to position popovers relative to their controls usingCSS anchor positioning. SeePopover anchor positioning for more details.

Value

A reference to a popover element in the DOM.

Examples

function supportsPopover() {  return Object.hasOwn(HTMLElement.prototype, "popover");}const popover = document.getElementById("mypopover");const toggleBtn = document.getElementById("toggleBtn");const popoverSupported = supportsPopover();if (popoverSupported) {  popover.popover = "auto";  toggleBtn.popoverTargetElement = popover;  toggleBtn.popoverTargetAction = "toggle";} else {  console.log("Popover API not supported.");}

Toggle popover action with an auto popover

This example shows the basic use of the popover API, setting a<div> element as a popover, and then setting it as thepopoverTargetElement of an<input> oftype="button".Thepopover attribute is set to"auto", so the popover can be closed ("light-dismissed") by clicking outside the popover area.

First we define an<input> that we will use to display and hide the popover, and a<div> that will be the popover.In this case we don't set thepopovertargetaction HTML attribute on the<input> or thepopover attribute on the<div>, as we will be doing so programmatically.

<input type="button" value="Toggle popover" /><div>This is popover content!</div>

The JavaScript code first gets a handle to the<div> and<input> elements.It then defines a function to check for popover support.

const popover = document.getElementById("mypopover");const toggleBtn = document.getElementById("toggleBtn");// Check for popover API support.function supportsPopover() {  return Object.hasOwn(HTMLElement.prototype, "popover");}

If the popover API is supported the code sets the<div> element'spopover attribute to"auto" and makes it the popover target of the toggle button.We then set thepopoverTargetAction 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 input element.

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;}

You can try out the example below.Show and hide the popover by toggling the button.The "auto" popover can also be light dismissed by selecting outside the bounds of the popover text.

Specifications

Browser compatibility

See also

• popover HTML global attribute
• Popover API