popover属性 Sample

• Chrome 114以降で、popover属性が利用可能。
• popover属性を使うことで、JavaScriptを使わずにポップオーバーの開閉動作を実装することができる。

自動ポップオーバー

• popover属性のdefault値は "auto" の自動ポップオーバー。
• ポップオーバーの領域外をクリックすると、ポップオーバーが閉じてフォーカスが戻るライトディスミスに対応。
• escキーを推すと、ポップオーバーを閉じてフォーカスが戻る。
• popovertargetaction="show": ポップオーバーを表示
• popovertargetaction="hide": ポップオーバーを非表示

自動ポップオーバー + backdrop指定

• ::backdrop を使うことで、ポップオーバーを半透明の上に表示するようなCSS指定が可能。

popover="manual" でライトディスミス無効化＆複数のポップオーバー表示を許可

• popover="manual" にすると、他のポップオーバーを閉じない。
• popover="manual" にすると、ライトディスミスが無効化されるため、トグルやクローズのアクションで閉じる必要がある。

ポップオーバーのJS操作 (popover="manual")

• JavaScriptからは、element.showPopover() element.hidePopover() element.togglePopover() の形式で、ポップオーバーを操作することが可能。

外部からの操作 Open Close Toggle