HTML popover グローバル属性

popover 属性は、次のいずれかの値を取ることができます。

"auto"

auto ポップオーバーは「簡単に閉じる」ことができます。これは、ポップオーバーの外側をクリックするか、 Esc キーを押すことでポップオーバーを非表示にできるということです。 auto ポップオーバーを表示すると、入れ子になっていない限り、通常、すでに表示されている他の auto ポップオーバーは閉じられます。

メモ: popover に空の値を設定する（popover または popover=""）ことは、popover="auto" を設定することと同じです。

"hint" Experimental

hint ポップオーバーは、表示時に auto ポップオーバーは閉じませんが、それ以外のヒントポップオーバーは閉じます。 これらは簡単に閉じることができ、閉じるリクエストに応答します。

"manual"

manual ポップオーバーは「簡単に閉じる」ことはできず、自動的に閉じられることもありません。ポップオーバーは、宣言的な表示/非表示/切り替えボタンまたは JavaScript を使用して、明示的に表示および閉じる必要があります。複数の独立した manual ポップオーバーを同時に表示することができます。

ポップオーバー要素は、呼び出し/制御要素（つまり、<button> または <input type="button"> に対応する popovertarget 属性を持つ) または HTMLElement.showPopover() 呼び出しによって開かれるまで、非表示になっています。

開くと、ポップオーバー要素は 最上位レイヤー 内の他のすべての要素の上に現れ、親要素の position または overflow スタイル設定の影響を受けません。

auto 状態を持つポップオーバーは、関連付けられたコントロール（popovertarget 属性で指定）を使用して表示および非表示にすることができ、ポップオーバー領域の外側をクリックするか、別のポップオーバーを開くか、Esc キーなどのブラウザー固有の機構を押すことで「簡単に閉じる」ことができます。

通常、画面には一度に 1 つの auto ポップオーバーしか表示できません。2 つ目のポップオーバーを表示すると、最初のポップオーバーは非表示になります。この規則の例外は、入れ子になった自動ポップオーバーがある場合です。詳細については、入れ子になったポップオーバー を参照してください。

JavaScript を使用して制御することもできます。例えば、HTMLElement.togglePopover() メソッドを使用すると、ポップオーバーの表示と非表示を切り替えることができます。

対照的に、manual ポップオーバーは、手動で表示および非表示にする必要があります。表示しても他のポップオーバーは自動的に閉じられず、簡単に閉じることもできません。これにより、複数のポップオーバーを同時に表示したい用途に使用できます。

hint ポップオーバーは、表示されたときに auto ポップオーバーを閉じませんが、それ以外のヒントポップオーバーは閉じます。簡単に閉じることができ、閉じるリクエストにも応答します。

通常、hint ポップオーバーは、mouseover/mouseout や focus/ などのクリック以外の JavaScript イベントに応じて表示および非表示になります。 blur などのクリック以外の JavaScript イベントに応じて表示および非表示になります。ボタンをクリックして hint ポップオーバーを開くために、開いている auto ポップオーバーを簡単に閉じることを発生させます。

使い方についての詳しい情報は、ポップオーバー API ランディングページを参照してください。

以下は、ポップオーバー要素を開くためのボタンを描画するものです。

<button popovertarget="my-popover">ポップオーバーを開く</button>

<div popover id="my-popover">私から皆さんへ、こんにちは！</div>

• ポップオーバー API
• HTML の popovertarget 属性
• HTML の popovertargetaction 属性
• CSS の ::backdrop 擬似要素
• CSS の :popover-open 擬似クラス