💬

ポップオーバーをシンプルに実現する、Popover API

よつ

2025/01/02に公開

はじめに

2024 年の Newly Available（最新バージョンのブラウザで利用できる機能）を流し見していた際、面白そうな機能があったので取り上げます。

ポップオーバーとは

コンテンツの上に重ねて表示するコンテンツを指すようです。一般的には、ボタンをクリックしたときにほかの要素より上に出るようなポップアップのことを指します。いわゆるモーダルなどがこれに分類されますね。

例として、Material UI の実装を置いておきます。

Popover API は、ポップオーバーを表示するための Web 標準の API です。
Web API によって提供されるということは、外部ライブラリに頼らず、多くのブラウザで安定して動作することが期待できます。

使ってみる

これまでのポップオーバー

これまで、ポップオーバーを実装するためには JavaScript で動的に CSS を編集する必要がありました。たとえば button 要素の onclick イベント内で特定の要素の表示を切り替えてあげれば、API を使わずとも実装ができます。

<button id="popoverBtn">Click me</button>
<div id="popover" class="popover">Hello, this is a custom popover!</div>

.popover {
  position: fixed; 
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 1000;
}

const button = document.getElementById("popoverBtn");
const popover = document.getElementById("popover");

button.addEventListener("click", () => {
  const isVisible = popover.style.display === "block";
  if (isVisible) {
    popover.style.display = "none";
  } else {
    popover.style.display = "block";
  }
});

これでもよいですが、たった1つの要素の実装が複数ファイルにまたがっているのは、メンテナンス性の面から少しいただけません。

さて、Popover API を使用して実装してみます。
API を使用した場合、（スタイルを考慮しなければ）実に2行のみで実装が完結します。

<button id="popover-btn" popovertarget="popover">Click me</button>
<div popover id="popover" class="popover">Hello, this is a custom popover!</div>

基本的な使い方は単純で、

ポップオーバー部分に popover と任意の id をつける
ポップオーバーを操作する部分に popovertarget をつけ、操作したいポップオーバーの id を指定する

これだけです。
シンプルなポップオーバーの実装に役立ちそうですね。

Progate Path コミュニティPublication

Progate公式コミュニティ 💻 日々エンジニアを目指す方々が集まっています✨ ✅プログラミングに関する情報共有 ✅コミュニティメンバーによるイベントへの参加 ✅開発経験者による技術的な質問への回答独学でエンジニアを目指す、あなたの参加を待っています！