【HTML Living Standard】popover属性の使い方
popover属性の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
popoverプロパティは、HTML要素にポップオーバー機能を持たせるための設定情報を保持するプロパティです。HTML Living Standardで導入されたグローバル属性の一つとして、この属性を持つ要素は、他のコンテンツの上に一時的に表示されるUI（ユーザーインターフェース）要素、例えばツールチップ、メニュー、ダイアログ、通知などの「ポップオーバー」として扱われます。
通常、この属性が付与された要素は初期状態では非表示であり、ユーザーのアクションやJavaScriptによる制御によって表示・非表示が切り替わります。主な使用方法としては、ポップオーバーとなる要素にid属性を指定し、そのid値を、ポップオーバーの表示を制御する別の要素（例えばボタンなど）のpopovertarget属性に設定することで、簡単に連携させることができます。
popover属性は値を持つことができ、autoとmanualの2種類があります。popover="auto"と設定した場合、ポップオーバーは、Escキーの押下やポップオーバーの外側をクリックするなどの操作によって自動的に閉じることができます。一方、popover="manual"と設定した場合は、表示・非表示の制御を完全にJavaScriptで行う必要があり、自動で閉じる機能は提供されません。
この属性を利用することで、開発者は複雑なスクリプトを記述することなく、アクセシビリティを考慮したポップオーバーUIを効率的に実装し、ユーザーにより良い操作体験を提供することが可能になります。
公式リファレンス: HTML popover global attribute
構文(syntax)
1<div popover></div>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません