Newly available 主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。

Popover

popover はグローバル属性で、要素をポップオーバー要素として示すために使われます。

メタデータ・スクリプト

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
popover
114
114
125
17
114
17
popovertarget

要素をポップオーバーの制御ボタンに変換します。制御するポップオーバー要素の ID を値として受け取ります。 popovertarget 属性を使用してポップオーバーとその呼び出し元ボタンとの関連付けを設定すると、2 つの有益な効果が追加されます。 - ブラウザーは、ポップオーバーと呼び出し元との間に暗黙の aria-details および aria-expanded の関係を作成し、ポップオーバーが表示されたときに、キーボードフォーカスナビゲーションの順序で論理的な位置にポップオーバーを配置します。これにより、キーボードおよび支援技術 (AT) のユーザーもポップオーバーにアクセスしやすくなります （「ポップオーバーのアクセシビリティ機能」も参照してください）。 - ブラウザーは、2…
114
114
125
17
114
17
popovertargetaction

制御用 によって制御されているポップオーバー要素に対して実行される動作を指定します。使用可能な値は以下の通りです。
114
114
125
17
114
17
popovertarget

をポップオーバー制御ボタンにします。制御するポップオーバー要素の ID を値として取ります。詳細はPopover API のランディングページを参照してください。 popovertarget 属性を使用してポップオーバーとその呼び出しボタンを関連付けると、さらに 2 つの有益な効果があります。 - ブラウザーは、ポップオーバーと呼び出し元の間に、暗黙的な aria-details および aria-expanded の関係を生成し、ポップオーバーを表示させる際には、キーボードフォーカスナビゲーションの論理的な位置にポップオーバーを配置します。これにより、キーボードや支援技術 (AT) のユーザーにとって、ポップオーバーがよりアクセスしやすくなります（ポップオーバーのアクセシビリティ機能も参照してください）。…
114
114
125
17
114
17
popovertargetaction

制御用の で制御されるポップオーバー要素で行われる動作を指定します。取りうる値は次の通りです。
114
114
125
17
114
17
DOM API
popoverTargetAction

popoverTargetAction は HTMLButtonElement インターフェイスのプロパティで、この制御ボタンで制御されるポップオーバー要素で実行されるアクション（"hide"、"show"、"toggle" の何れか）を取得および設定します。
114
114
125
17
114
17
popoverTargetElement

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

beforetoggle は HTMLElement インターフェイスのイベントで、Popover_API要素（すなわち有効な popover 属性がある要素）において、表示または非表示になる直前に発行されます。
114
114
125
17
114
17
beforetoggle_event (popover elements)

ポップオーバー要素で `beforetoggle` イベントが発生する
114
114
125
17
114
17
hidePopover

hidePopover() は HTMLElement インターフェイスのメソッドで、ポップオーバー要素（すなわち有効な popover 属性がある要素）をtop layerから外し、display: none のスタイルを付けます。
114
114
125
17
114
17
popover

popover は HTMLElement インターフェイスのプロパティで、要素のポップオーバー状態（"auto" または "manual"）を JavaScript から取得したり設定したりします。機能検出に使用することもできます。
114
114
125
17
114
18.3
showPopover

showPopover() は HTMLElement インターフェイスのメソッドで、Popover_API要素（すなわち有効な popover 属性がある要素）をtop layerに追加することで表示します。
114
114
125
17
114
17
showPopover (options source parameter)

options.source`パラメータ
137
137
144
26
137
26
toggle_event (popover elements)

ポップオーバー要素で `toggle` イベントが発生する
114
114
125
17
114
17
togglePopover

togglePopover() は HTMLElement インターフェイスのメソッドで、Popover_API要素（すなわち有効な popover 属性がある要素）の非表示状態と表示状態をトグル切り替えします。
114
114
125
17
114
17
togglePopover (options source parameter)

options.source`パラメータ
137
137
144
26
137
26
togglePopover (returns boolean)

true` または `false` を返す。
116
116
125
17
116
17
popoverTargetAction

popoverTargetAction は HTMLInputElement インターフェイスのプロパティで、input 要素の type="button" 型でで制御されるポップオーバー要素で実行されるアクション（"hide"、"show"、"toggle" のいずれか）を取得および設定します。
114
114
125
17
114
17
popoverTargetElement

popoverTargetElement は HTMLInputElement インターフェイスのプロパティで、input 要素の type="button" 型で制御されるポップオーバー要素を取得および設定します。
114
114
125
17
114
17
ToggleEvent

ToggleEvent インターフェイスは、ポップオーバー要素の状態が表示と非表示の間で切り替わるときにユーザーに通知するイベントを表します。
114
114
120
17
114
17
newState

newState は ToggleEvent インターフェイスの読み取り専用プロパティで、この要素が遷移した後の状態を表す文字列です。
114
114
120
17
114
17
oldState

oldState は ToggleEvent インターフェイスの読み取り専用プロパティで、この要素が遷移する前の状態を表す文字列です。
114
114
120
17
114
17
ToggleEvent

ToggleEvent() コンストラクターは、新しい ToggleEvent オブジェクトを生成します。
114
114
120
17
114
17
CSS セレクタ
popover

ポップオーバーのサポート
114
114
125
17
114
17
その他
css.selectors.popover-open

ポップオーバー・オープン
114
114
125
17
114
17
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18.3)
実装メモ
  • iOSおよびiPadOSにおいて、ポップオーバー領域の外側をタップしてもポップオーバーが解除されない問題を修正しました。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (137)
実装メモ
  • このオプションを使用すると、フォーカスの順序が変更されないため、ポップオーバーが次のフォーカス要素になりません。バグ 383343310 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (137)
実装メモ
  • このオプションを使用すると、フォーカスの順序が変更されないため、ポップオーバーが次のフォーカス要素になりません。バグ 383343310 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (144)
実装メモ
  • このオプションを使用すると、フォーカスの順序が変更されないため、ポップオーバーが次のフォーカス要素になりません。バグ1984004を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (26)
実装メモ
  • このオプションを使用すると、フォーカスの順序が変更されないため、ポップオーバーが次のフォーカス要素になりません。バグ 286575 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (137)
実装メモ
  • このオプションを使用すると、フォーカスの順序が変更されないため、ポップオーバーが次のフォーカス要素になりません。バグ 383343310 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (26)
実装メモ
  • このオプションを使用すると、フォーカスの順序が変更されないため、ポップオーバーが次のフォーカス要素になりません。バグ 286575 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (137)
実装メモ
  • このオプションを使用すると、フォーカスの順序が変更されないため、ポップオーバーが次のフォーカス要素になりません。バグ 383343310 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (137)
実装メモ
  • このオプションを使用すると、フォーカスの順序が変更されないため、ポップオーバーが次のフォーカス要素になりません。バグ 383343310 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (144)
実装メモ
  • このオプションを使用すると、フォーカスの順序が変更されないため、ポップオーバーが次のフォーカス要素になりません。バグ1984004を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (26)
実装メモ
  • このオプションを使用すると、フォーカスの順序が変更されないため、ポップオーバーが次のフォーカス要素になりません。バグ 286575 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (137)
実装メモ
  • このオプションを使用すると、フォーカスの順序が変更されないため、ポップオーバーが次のフォーカス要素になりません。バグ 383343310 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (26)
実装メモ
  • このオプションを使用すると、フォーカスの順序が変更されないため、ポップオーバーが次のフォーカス要素になりません。バグ 286575 を参照してください。

基本構文

HTML 
<button popovertarget="my-popover">Show Popover</button>
<div id="my-popover" popover>
  <p>This is the content of the popover.</p>
</div>

ライブデモ

basic popover

JS none. popover realize. with Popover attribute and popovertarget.

プレビュー全画面表示

Manualmode. popover

auto disabledization.explicit to toggle. with popover=manual

プレビュー全画面表示

::backdrop styling

popover. background styling.notification or modal style. useside.

プレビュー全画面表示

実務での使いどころ

  • Popover の活用

    popover はグローバル属性で、要素をポップオーバー要素として示すために使われます。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク