HTMLButtonElement: popoverTargetElement プロパティ

Baseline 2024 *

Newly available

Since ⁨April 2024⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

popoverTargetElement はHTMLButtonElement インターフェイスのプロパティで、制御ボタンで制御されるポップオーバー要素を取得および設定します。

これは JavaScript において HTML のpopovertarget 属性に相当するものです。

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

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

html

<button>ポップオーバーの切り替え</button><div>これはポップオーバーコンテンツです。</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;}

メモ:ポップオーバー要素は既定では非表示ですが、API に対応していない場合、要素は「通常通り」表示されます。

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