HTMLInputElement: popoverTargetElement property

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The popoverTargetElement property of the HTMLInputElement interface gets and sets the popover element to control via an <input> element of type="button".

It is the JavaScript equivalent of the popovertarget HTML attribute.

Value

A reference to a popover element in the DOM.

Examples

function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("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.");
}

Specifications

Specification
HTML Standard
# dom-popovertargetelement

Browser compatibility

BCD tables only load in the browser

See also