Popover APIを使ったポップオーバーUIの実装

2023年6月27日2023年11月3日

Google Chromeなど一部のブラウザで、JavaScriptいらずでポップオーバーが実装できるようになったそうです！

今回はPopover APIを使ったポップオーバーUIの実装を試してみようと思います。

各ブラウザの対応状況

2023年11月3日現在、MDNを見ると全てのブラウザで動作するわけではないようです。

GoogleChrome/Safari/Edge/Operaの最新版はOK
Firefoxはアウト

案件で用いられる際はご注意ください。

基本のポップオーバー

下記のHTMLを用意するだけで動作します！

popoverの名前を決める。今回はtestPopoverとしました。
popovertarget属性をつけたbuttonタグを用意する。
<button popovertarget=”testPopover”>
buttonタグのpopovertarget属性で指定したのと同じ名前のidと、popover属性が入った要素を用意する。
<div id=”testPopover” class=”test-popover” popover>

表示されたポップオーバーは下記のような特徴があるようです。

画面の最上位に表示される（z-indexによるレイヤー指定が関係ない）。
ポップオーバーの外側をクリックすれば、ポップオーバーの表示を解除できる。
複数ポップオーバーがある際、片方のポップオーバーを開くと、もう片方のポップオーバーが自動で閉じる。

動作サンプル

See the Pen Popover API by Yoshihiro Hotta (@yoshihiro-hotta) on CodePen.

HTML

<!-- ポップオーバーを動作させるボタン  -->
<button popovertarget="testPopover">ポップオーバー</button>

<!-- ポップオーバーで表示されるコンテンツ  -->
<div id="testPopover" class="test-popover" popover>ポップオーバーコンテンツ</div>

CSS

ポップオーバーはそのままだと少し太めのborderのみが適用されているので、適宜装飾するのがよさそうです。

.test-popover {
  width: 300px;
  height: 150px;
  background: #dee9ff;
  border: none;
  border-radius: 10px;
  box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

最後に

今回はHTMLと簡単なCSSのみでPopover APIを使ってみましたが、JavaScriptと組み合わせれば色々なUIが表現できそうですね。

今後も新しいものから既存のものまで、色々なWebAPIを試していきます！

Popover APIを使ったポップオーバーUIの実装

各ブラウザの対応状況

基本のポップオーバー

動作サンプル

HTML

CSS

最後に

関連記事