クリックで開くインフォポップオーバー
アイコンクリックで横に小窓が開くインフォポップオーバー。Tooltip より長文・複数行向け。設定 UI・補足説明に頻出。
解説
クリックで開くインフォポップオーバーは、UI コンポーネントカテゴリの「ツールチップ」に分類される実装パターンです。CSS と JavaScript の組み合わせで構成され、難易度は中級レベル。
アイコンクリックで脇に情報を表示。Tooltip より長文・複数行向け。設定 UI で頻出。
Tooltip は短文向きですが、「もう少し詳しい説明を出したい」場合に使うのがポップオーバーです。設定 UI のアイテム横に置く「ℹ️」アイコンや、料金プランの「内訳を見る」ボタンなどで重宝します。
仕組み
下記コードタブから HTML / CSS / JS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
JavaScript 部分は vanilla（プレーン）JS で書かれており、jQuery / React / Vue いずれの環境にも持ち込めます。
注意点 / カスタマイズ時のポイント
2026 年現在は、JavaScript 不要のネイティブ popover 属性（[ui-popover-api-menu](/snippets/ui-popover-api-menu.html) スニペット参照）が使えるようになっているので、新規案件はそちらを推奨。
使用例・適したシーン
- フォーム項目の補足説明
- アイコン UI のラベル表示
- 用語の解説表示
よくある質問
新しい popover 属性とどっちを使うべき？
Chrome / Safari / Firefox すべて対応済みなので、新規案件はネイティブ
popover 属性を推奨。レガシー対応が必要な場合のみ、こちらの JS 実装を使ってください。このスニペットは商用利用できますか？
はい。moatway がオリジナルで制作したスニペットは商用・個人問わず自由にご利用いただけます。クレジット表記も不要です。
そのまま貼り付ければ動きますか？
はい。HTML / CSS / JS タブのコードをそれぞれ自分のファイルにコピーして貼り付ければ動きます。クラス名が他の CSS と衝突しないよう、必要に応じてリネームしてください。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。Internet Explorer はサポート対象外です。
jQuery でも書けますか？
この実装は vanilla JavaScript で書いています。jQuery が必要であれば
document.querySelector を $() に置き換える程度で動作しますが、近年は jQuery を使わない方が軽量で推奨されます。