popover 属性を使うと、JavaScriptを書かずに簡易なポップアップを実装できます。
しばらくコーディングから離れていましたが、HTMLもどんどん進化していきますね。四苦八苦しながらHTMLを勉強していた当時は、まさかHTMLだけでポップアップが出せる時代がくるとは思ってもいなかったです。
この記事では基本的な使い方と、似た機能を持つ <dialog> 要素との違いについてまとめます。
<dialog> 要素との比較
dialog要素もモーダルを表現するために使用されます。見た目や振る舞いがよく似ているため、違いを整理しておきます。
共通点
- どちらもトップレイヤーに描画される（
z-indexや DOM の階層に影響されない） ::backdropで背面のスタイルを指定できる- JavaScriptから表示・非表示を切り替えられる
相違点
<dialog> | popover | |
|---|---|---|
| 背面の操作 | 不可（モーダル） | 可能 |
| HTMLのみでの制御 | 不可 | 可能 |
背面の操作を許容するため、popover はモーダルよりもツールチップや通知バナーのような非ブロッキングなポップアップに向いています。
基本的な使い方（HTML のみ）
<button type="button" popovertarget="tip" popovertargetaction="toggle">
ポップアップを表示
</button>
<div id="tip" popover>
こんにちは
</div>
ポップアップ本体の属性
基本的には popover 属性を付与するのみ。
自動で閉じる機能を無効化したいとき（JavaScriptから明示的にとじたい時）は popover=”manual” を指定します。
| 属性 | 説明 |
|---|---|
popover | ポップアップとして機能させる |
popover="manual" | 自動で閉じる動作を無効化し、JavaScript から明示的に制御する |
コントローラー（ボタン）の属性
| 属性 | 説明 |
|---|---|
popovertarget | 制御するポップアップ要素の id を指定 |
popovertargetaction | クリック時のアクションを指定（省略可） |
popovertargetaction に指定できる値：
toggle（デフォルト）：表示・非表示を切り替えshow：表示のみhide：非表示のみ
表示位置について（CSS）
popover 属性はトップレイヤーに描画されるため、ほとんどのモダンブラウザでは以下のスタイルがデフォルトで適用されます。
[popover] {
position: fixed;
inset: 0;
margin: auto;
}
何も指定しなければ画面中央に表示されます。ツールチップなど位置を指定したい場合は、position: absolute などで明示的に上書きすることが望ましいです。
JavaScript での操作
const popup = document.getElementById('tip');
popup.showPopover(); // 表示
popup.hidePopover(); // 非表示
注意： 古い記事では
showPopup()/hidePopup()と記載されているものがありますが、現在の仕様ではshowPopover()/hidePopover()が正しいメソッド名です。
popover を持つ要素は複数を同時に表示することができます。
ツールチップなどでは問題ないでしょうが、「表示するのは常に1つだけ」といった制御が必要な場合は、JavaScript から操作するのがよいでしょう。
サンプルコード
実際に書いてみたコードはこちら。
階層に左右されずトップレイヤーに表示されること、背面レイヤーも操作可能であること、popovertargetction属性の違いによる振る舞いの違いが確認できます。
