ボタンの操作でポップオーバー要素を開閉する

button要素、またはボタン状態のinput要素に popovertarget="" や popovertargetaction="" を追加すると、ボタンの操作でポップオーバー要素を開閉することができます。

• ポップオーバー要素とは、popover属性が指定された要素のことを言います。

popovertarget属性について

popovertarget属性は、ポップオーバー要素とボタンとを関連付けるための属性です。

<button type="button" popovertarget="test1">ボタン</button>

<div popover="auto" id="test1">
ポップオーバー要素
</div>

上記のように、ポップオーバー要素に指定したID名（test1）をpopovertarget属性の値に記述することで、このボタンを押した時に対象のポップオーバー要素が開閉するようになります。

input要素を使用する場合は次のようになります。

<input type="button" popovertarget="test2" value="ボタン">

<div popover="auto" id="test2">
ポップオーバー要素
</div>

popovertargetaction属性について

popovertargetaction属性は、ボタンを押した時の動作を指定する属性です。指定できる値は次の3つです。

toggle

ボタンを押すたびに、ポップオーバー要素の表示・非表示が切り替わります。（既定値）

show

ボタンを押すと、非表示のポップオーバー要素が表示されます。

hide

ボタンを押すと、表示されているポップオーバー要素が非表示になります。

トグルボタンとして使用する場合は次のようになります。

<button type="button" popovertarget="test3" popovertargetaction="toggle">表示/非表示</button>

<div popover="auto" id="test3">
ポップオーバー要素
</div>

表示と非表示のボタンを別々に設置する場合は次のようになります。

<input type="button" popovertarget="test4" popovertargetaction="show" value="表示">
<input type="button" popovertarget="test4" popovertargetaction="hide" value="非表示">

<div popover="auto" id="test4">
ポップオーバー要素
</div>

ボタンとポップオーバー要素の記述位置について

可能な限り、ポップオーバー要素はボタンの直後に記述するようにします。そうすることで、スクリーンリーダーによって適切な順序で読み上げられるようになるそうです。