Popover API
JavaScript を使わなくても使うことができる。
すべての表示可能な要素は popover 属性を持つことができる。
ボタンなどに popovertarget 属性で popover属性を持つ要素のidを指定すると、そのアクションの結果、対象の要素がポップオーバー表示される。
ポップオーバー表示は表示上、最上位レイヤに配置される。
ポップオーバーは親子の場合は同時に表示できるが(これはサブメニューなどで利用される)、親子関係にない場合は排他的にしか表示されない。
表示はどうなる?
デフォルトの場合
初期は display: none で非表示状態になる。
表示されるときは、モーダルダイアログと同じ表示になる。
見かけ上、DOMでは HTML の下に #top-layer
https://gyazo.com/715ff881384257d0fe0f2e5af171a66e
親要素の座標系を引き継がない。
つまり親要素のラバーバンド表示みたいな使い方をするには、改めて座標を指定する必要がある。
どうしたらポップオーバーを消せる?
popovertargetaction="toggle" または popovertargetaction="hide" になってるUI部品でアクション
JavaScript の Element.togglePopover() か Element.hidePopover() の呼び出し。
デフォルト(popover="auto")の場合は自動的に消す機能が余分に付く
ポップオーバー以外の要素をクリックする。
Baseline 2024 なので、ちょっと古いブラウザではもう動かない。
参考