div など好きな要素に popover 属性をつけれる
<div popover>
あいうえお
</div>
popover 属性をつけた要素は表示されない
UA のスタイルで display: none されてる
[popover]:not(:popover-open):not(dialog[open]) {
display: none;
}
popover 要素は showPopover メソッドで表示できる
document.querySelector("div").showPopover()
dialog と同じ感じで中央に表示される
表示は最上位になるので position: fixed で z-index 大きめの要素があってもさらにその上に来る
popover の要素の外側の適当なところをクリックすると自動で閉じてくれる
プログラムから閉じるときは hidePopover()
属性で popover="manual" を指定すると自動で閉じなくなる
デフォルトの value 省略形は popover="auto" を指定するのと一緒
popover 属性がついてない要素に showPopover を実行するとエラーになる
Failed to execute 'showPopover' on 'HTMLElement': Not supported on elements that do not have a valid value for the 'popover' attribute.
表示中に showPopover を呼び出してもエラーになる
Failed to execute 'showPopover' on 'HTMLElement': Invalid on popover elements which aren't hidden.
この辺はもっとゆるくていいと思うのに
togglePopover() メソッドもあって 引数の true/false で表示・非表示を指定できる
こっちだと表示中に表示しようとしてもエラーは出ないのでこっちのほうが扱いやすいかも
複数の popover 要素があって 表示中の要素があるときに 別の要素を表示させようとした場合は showPopover でエラーにならない
すでに表示していた popover 要素は自動で閉じられる
popover="manual" の場合は閉じられないので 複数の popover 要素が表示できる
popovertarget と popovertargetaction 属性もあって これを使うと JavaScript なしで HTML だけでも表示・非表示を制御できる
属性名が長い
<button popovertarget="foo" popovertargetaction="show">
ここをクリックすると POPOVER を表示
</button>
<div popover id="foo">
<h1>POPOVER</h1>
<button popovertarget="foo" popovertargetaction="hide">
ここか外側をクリックすると POPOVER を隠す
</button>
</div>
マニュアルの場合
<button popovertarget="foo" popovertargetaction="show">
SHOW
</button>
<button popovertarget="foo" popovertargetaction="hide">
HIDE
</button>
<button popovertarget="foo" popovertargetaction="toggle">
TOGGLE
</button>
<div popover="manual" id="foo">
<h1>POPOVER</h1>
</div>
popover のネストもできる
popover で表示される要素の中に popover 要素を配置する
<button popovertarget="foo" popovertargetaction="show">SHOW</button>
<div popover id="foo">
<h1>POPOVER1</h1>
<button popovertarget="bar" popovertargetaction="show">SHOW</button>
<div popover id="bar">
<h1>POPOVER2</h1>
</div>
</div>
POPOVER2 を表示すると POPOVER1 は後ろで表示されたまま
POPOVER2 の外側かつ POPOVER1 の内側のエリアをクリックすると POPOVER2 だけを閉じれる
POPOVER1 の外側をクリックすると両方とも閉じられる
現状の機能だと位置は中央にしか来ないみたい
表示するボタンのすぐ下に持ってきたりする機能はなさそう
中央に来てるのはデフォルトの UA スタイルで margin: auto だからなので margin 等を JavaScript で調整して期待の位置に持っていくことになりそう
中身まで見てないけど Chrome 116 の機能で CSS Anchor Positioning というのがあるので これでアンカーを指定できるようになるのかも？
