popover

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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

ポップオーバー要素は、呼び出し/制御要素(すなわち <button> または <input type="button">popovertarget 属性が付いたもの)、または HTMLElement.showPopover() の呼び出しによって開かれるまで、display: none で非表示になっています。

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

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

基本的な例

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

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

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

メモ: MDN にあるポップオーバーの例の完全な例にアクセスするには、ポップオーバー API 例のランディングページを参照してください。

仕様書

Specification
HTML Standard
# the-popover-attribute

ブラウザーの互換性

BCD tables only load in the browser

関連情報