Popover API サンプル

ネイティブ HTML の popover 属性を使ったデモです。
参考: Popover API について (Zenn)

① Auto Popover（外をクリックで閉じる）

popover="auto" はポップオーバー外をクリックすると自動で閉じます。

Auto Popover

外側をクリックするか、もう一度ボタンを押すと閉じます。

② Manual Popover（明示的に操作が必要）

popover="manual" は外クリックでは閉じず、ボタン操作でのみ開閉します。

Manual Popover

「閉じる」ボタンを押さないと消えません。

③ Backdrop 付き Popover

::backdrop 疑似要素で背景を暗くできます。

Backdrop 付き

::backdrop でオーバーレイを表現できます。
外をクリックすると閉じます。

④ JavaScript による制御

showPopover() / hidePopover() / togglePopover() で操作できます。

JS 制御 Popover

JavaScript の API (showPopover / hidePopover) で操作しています。