HTML Tag Reference
popover 属性
ポップオーバー要素に指定する
popover 属性は、要素をポップオーバー要素であると指定するために使用します。
ポップオーバー要素とは、特定の条件で呼び出されるまで画面上には表示されず（display: none; 状態）、例えば HTMLElement: showPopover() メソッドなどで呼び出され、表示された際には、最上位レイヤー（top layer）、内の他のすべての要素の上に表示され、かつ親要素の position や overflow プロパティの影響を受けない要素のことです。
dialog 要素でも同様の実装が可能ですが、dialog 要素がモーダル（その要素が表示されている間、他の要素は反応しない）表示のコンテンツを生成するのに対して、popover 属性が付与された要素は、非モーダル（その要素が表示されている間も他の要素は反応する）であることが異なります。
dialog 要素は、ダイアログボックス（ユーザーに情報を提示し、必要に応じて応答してもらうための特殊ウィンドウの一種）を表示するためのものです。ポップアップするからといって、コンテキストメニューやツールチップを dialog 要素で実装することは望ましくありません。その場合は、popover 属性を使用するのが妥当でしょう。
なお、アクセシビリティ・セマンティクスのない要素（たとえば div 要素のような）でポップオーバーを使用する場合、適切な WAI-ARIA 属性を使用して、ポップオーバーが支援技術からアクセス可能であることを確認する必要があります。
popover 属性で使用できる属性値
| 属性値 | 概要 |
|---|---|
| auto | 初期値。このポップオーバー要素を開くと、他のポップオーバー要素を閉じます。また、他のポップオーバー要素からの閉じるリクエストに応答します。つまり、複数のポップオーバー要素にこの値のみが与えられている場合、排他的処理が実現できます。 |
| manual | このポップオーバー要素を開いたとき、他のポップオーバー要素を閉じず、他のポップオーバー要素からの閉じるリクエストにも応答しません。 |
popover 属性に関連する属性
popover 属性の仕様
- この属性を使用できる要素
-
- すべての HTML 要素
popover 属性のサンプルソース
<button popovertarget="menu">メニューを開く</button>
<nav id="menu" popover="auto">
<h2>メニュー</h2>
<ul>
<li><a href="#">メニュー01</a>
<li><a href="#">メニュー02</a>
<li><a href="#">メニュー03</a>
</ul>
<button popovertarget="menu" popovertargetaction="hide" aria-label="メニューを閉じる">×</button>
</nav>