Popover API ネイティブ ポップオーバー
popover 属性 + popovertarget 属性だけで実装できる HTML 標準のポップオーバー UI。Escape キー閉じ・トップレイヤー描画・backdrop 装飾まで無料。
解説
ボタンを押すと小さなメニューが浮かび上がるポップオーバーですが、開閉のロジックを JavaScript で書いていないのが特徴です。ボタン側に popovertarget、メニュー側に popover 属性を付けるだけで、HTML 標準の Popover API がトグル動作を担当します。背景をクリックしたときの自動クローズや、最前面への重ね合わせもブラウザが面倒を見てくれるため、クリック外し検知のコードを書く必要がありません。
ユーザーメニューや設定のドロップダウン、補足情報のヒント表示など、一時的に小さなパネルを開きたい場面に向きます。従来は外側クリックの監視や重なり順の管理を自前で実装する必要がありましたが、この方式なら属性を 2 つ足すだけで安定した挙動が得られ、コード量とバグの両方を減らせます。
カスタマイズと注意点
- メニューの見た目は
.pp-popoverの余白・角丸・影を編集して調整します。 - 開いたときの登場アニメーションは
@keyframesで変えられます。 - 表示位置はブラウザの自動配置が基本ですが、CSS のアンカー指定で細かく制御できる場合もあります。Popover API は新しめの機能なので、未対応環境向けにはフォールバックを用意するか、対応状況を踏まえて段階的に採用すると安全です。キーボード操作でも開閉できる点はアクセシビリティ上の利点です。
よくある質問
メニューの外側をクリックすると閉じる処理は自分で書きますか？
書く必要はありません。popover 属性を付けた要素は、背景クリックや Escape キーでの自動クローズをブラウザが標準で備えています。クリック外し検知のための JavaScript を書かずに済むので、コードがシンプルになります。
古いブラウザでも動きますか？
Popover API は比較的新しい機能のため、未対応のブラウザでは開閉が機能しないことがあります。重要なメニューに使う場合は、対応状況を確認したうえでフォールバックを用意するか、段階的に採用するのがおすすめです。