HTMLInputElement: popoverTargetAction

Baseline 2024

20244

popoverTargetAction HTMLInputElement <input> type="button" "hide""show""toggle"

HTML popovertargetaction

"hide"
"show"
"toggle": popoverTargetAction "toggle"

popoverTargetAction "toggle" API popover "auto" ("light-dismissed")

<input> type="button" <div> HTML popovertargetaction popover <div>

html

<input id="toggleBtn" type="button" value="" />
<div id="mypopover"></div>

JavaScript <div> <input>

const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

//  API 
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

API <div> popover "auto" popoverTargetAction "toggle" API <div>

if (supportsPopover()) {
  // <div> 
  popover.popover = "auto";
  // 
  toggleBtn.popoverTargetElement = popover;

  // 
  toggleBtn.popoverTargetAction = "toggle";
} else {
  popover.textContent = " API ";
  toggleBtn.hidden = true;
}

: API

/

popoverTargetAction "show" "hide"

2 <button> "manual" manual

html

<input id="showBtn" type="button" value="" />
<input id="hideBtn" type="button" value="" />
<div id="mypopover"></div>

function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

const popover = document.getElementById("mypopover");
const showBtn = document.getElementById("showBtn");
const hideBtn = document.getElementById("hideBtn");

const popoverSupported = supportsPopover();

if (supportsPopover()) {
  // <div> 
  popover.popover = "manual";

  // 
  showBtn.popoverTargetElement = popover;
  hideBtn.popoverTargetElement = popover;

  // /
  showBtn.popoverTargetAction = "show";
  hideBtn.popoverTargetAction = "hide";
} else {
  popover.textContent = " API ";
  showBtn.hidden = true;
  hideBtn.hidden = true;
}


HTML # dom-popovertargetaction

MDN

MDN 2025412

GitHub