これまで「ポップアップ」や「モーダルウィンドウ」を作るには、
JavaScriptやCSSトリックを駆使するのが当たり前でした。

ところが最近、**HTMLだけでポップアップを表示できる新属性「popover」**が登場！
これが想像以上にシンプルで、しかも見た目も自然なんです。

この記事では、「popover」属性の基本的な使い方から応用例までまとめています。

🚀 popover属性とは？

popover属性は、HTMLの要素に「ちょっとした吹き出し」や「軽いモーダル」を表示するための新仕様です。
JavaScriptなしで開閉制御でき、ボタンやリンクに紐づけて簡単に使えます。

対応ブラウザ

• ✅ Chrome 114以降

• ✅ Edge 114以降

• ✅ Safari 17以降

• ⚠️ Firefox（現時点では開発中）

※2025年現在、多くのモダンブラウザでサポートが進んでいます。

🧱 基本の使い方

✅ 最小構成の例 

• popover 属性を付与した要素が、ポップアップ対象になります。

• popovertarget 属性で、どの要素を表示するか指定します。

• ボタンをクリックするだけで自動的に開閉制御してくれます。

🎨 スタイルを整える

デフォルトのままだと少し味気ないので、CSSで整えましょう。

背景を白系にすれば、Webアプリ風のモーダルにも。

⚙️ 応用：自動で閉じる・メニュー風表示 

popovertargetaction="toggle" を使うと、クリックごとに開閉を切り替えられます。
ナビゲーションメニューやヘルプボックスなどにも応用可能です。

＜表示例＞

🧠 裏側の仕組み

HTMLの「popover」属性は、ブラウザ側で開閉制御を自動的に処理します。
内部的には :popover-open という擬似クラスが追加され、
CSSで開閉状態を検知することもできます。

**「開いたときだけアニメーション」**などを実現できます。

💻 実用例：通知メッセージ

フォーム送信後の完了メッセージなどにもぴったり。

⚠️ 注意点

• 古いブラウザでは未対応なので、必要に応じて<dialog>タグやJSフォールバックを検討。

• 開く方向は自動制御されるため、細かい位置調整が難しい場合があります。

• 長文や複雑なレイアウトには不向き（軽量ポップアップ用途がベスト）。

🌟 まとめ

🔮 今後の展望

「popover」属性はまだ新しい技術ですが、
“JavaScriptレスなUI” を目指すHTML進化の象徴です。

今後は、ツールチップ・通知・設定メニューなど、
より多くのシーンで採用が進むと期待されます。