HTMLButtonElement: popoverTargetElement プロパティ

DOM 内でのポップオーバー要素への参照です。

この例では、ポップオーバー API の基本的な使い方を示しています。まず、<div> 要素をポップオーバーとして設定し、それを <button> の popoverTargetElement として設定します。 popover 属性は "manual" に設定されているため、ポップオーバーはボタンを使用して閉じられなければならず、ポップオーバー領域外を選択して「簡単な解除」はできません。

まず、ポップオーバーの表示と非表示に使用する HTML の <button> 要素と、ポップオーバーとなる <div> 要素を定義します。 この場合、プログラムで設定する予定であるため、HTML の <button> 要素に popovertargetaction 属性を設定したり、<div> 要素に popover 属性を設定したりする必要はありません。

<button id="toggleBtn">ポップオーバーの切り替え</button>
<div id="mypopover">これはポップオーバーコンテンツです。</div>

JavaScriptのコードでは、最初に <div> および <button> 要素を取得します。 次に、ポップオーバーに対応しているかどうかを調べる関数を定義します。

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

// ポップオーバー API の対応を調べます。
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

ポップオーバー API に対応している場合、コードでは <div> 要素の popover 属性を "auto" に設定し、トグルボタンのポップオーバー対象とします。 次に、<button>の popoverTargetAction を "toggle" に設定します。 ポップオーバー API に対応していない場合は、<div> 要素のテキストコンテンツを変更してこの状態にし、トグルボタンを非表示にします。

if (supportsPopover()) {
  // <div> 要素を auto ポップオーバーに設定
  popover.popover = "auto";

  // ボタンポップオーバーの対象をポップオーバーに設定
  toggleBtn.popoverTargetElement = popover;

  // このボタンがポップオーバーの表示を切り替えるように設定
  toggleBtn.popoverTargetAction = "toggle";
} else {
  popover.textContent = "ポップオーバー API に対応していません。";
  toggleBtn.hidden = true;
}

下記の例を試してみてください。 ボタンを操作してポップオーバーの表示と非表示を切り替えてください。 "auto" ポップオーバーは、ポップオーバーテキストの境界外を選択することでも閉じることができます。

• ポップオーバー API