Popover API
ネイティブのpopover属性でツールチップとダイアログを作成します
「Popover API」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
Popover API でできること
Popover API を使うと、位置調整、フォーカス処理、ライトディスミス、Escape キーによる閉じる処理を手作業で JavaScript に実装せず、HTML だけでポップオーバー、ダイアログ、ツールチップ、メニューを作成できます。組み込みの動作はユーザーの期待に沿っています。
popover 属性
任意の要素に popover を追加すると、ポップオーバーになります。デフォルトでは非表示です。popovertarget="popover-id" を指定したトリガーボタンをクリックすると表示されます。ブラウザが開閉状態を自動的に処理します。
<button popovertarget="info">Show details</button>
<div id="info" popover>
<p>Here is some popover content.</p>
</div>ポップオーバーのモード
popover="auto"（デフォルト）では、外側のクリックまたは Escape キーでライトディスミスされます。同時に開ける auto ポップオーバーは 1 つだけです。popover="manual" では自動的に閉じず、JS または別のトリガーで明示的に閉じる必要があります。
トリガーボタン
popovertarget 属性は、ボタンとポップオーバーを id で関連付けます。ブラウザが切り替え動作を処理するため、ボタンをクリックすると表示され、もう一度クリックするか外側をクリックすると閉じます。基本的な用途ではイベントハンドラーは必要ありません。
トップレイヤーでのレンダリング
ポップオーバーはトップレイヤーでレンダリングされるため、z-index やスタッキングコンテキストに関係なく、他のすべてのコンテンツより上に表示されます。これにより、手作業で実装したポップオーバーでよくある、overflow:hidden の親要素の背後にモーダルが隠れる問題を解消できます。
プログラムによる表示と非表示
JavaScript からポップオーバーを表示または非表示にできます。element.showPopover()、element.hidePopover()、element.togglePopover() を使用します。宣言型のトリガーと同じセマンティクスを持ち、auto モードではライトディスミスも引き続き機能します。
toggle イベント
ポップオーバーは、状態が変化したときに toggle イベントを発生させます。イベントの newState は「open」または「closed」です。分析、フォーカス管理、またはポップオーバーの開閉状態に応じた他の UI との連携に役立ちます。
popoverEl.addEventListener("toggle", (e) => {
console.log("Popover is now", e.newState);
});CSS 疑似クラス
:popover-open 疑似クラスは、開いている状態のポップオーバーに一致します。この状態に基づいて、トランジション、透明度、変形を設定できます。[popover]:popover-open { opacity: 1; transform: none; }。
アンカーポジショニング
CSS Anchor Positioning API と組み合わせると、ポップオーバーをトリガーに対して自動的に相対配置できます。「ボタンの近くにツールチップを表示する」という典型的なパターンでも、JavaScript は必要ありません。どちらも、現代的な UI プリミティブを推進する同じ流れの機能です。
アクセシビリティ
ブラウザは、モーダルポップオーバーのフォーカスをトラップし、閉じるとトリガーにフォーカスを戻し、ポップオーバーが開いた状態をスクリーンリーダーに通知します。これを手作業で構築するには大量の ARIA の定型コードが必要ですが、Popover API なら標準で利用できます。
ブラウザサポート
Chrome と Safari は Popover API をサポートしており、Firefox も最近サポートを追加しました。より広い互換性が必要な場合は、小さなポリフィルを利用できます。新しいプロジェクトではネイティブ機能を提供し、古いブラウザにはプログレッシブエンハンスメントを適用できます。
古いパターンからの置き換え
多くの JS モーダルライブラリ（sweetalert、react-modal）は、主に Popover API がネイティブで提供する機能を補うために存在します。移行を計画してください。バンドルを小さくでき、デフォルトの動作が改善され、保守するコードも減ります。Popover API は、ここ数年で HTML に加わった最大級の改善の 1 つです。
知識チェック
popover="manual" にはなく、popover="auto" にある動作は何ですか。
まとめ
Popover API は、popover 属性、showPopover/hidePopover/togglePopover JS、popovertarget によるトリガーの関連付け、すべてのスタッキングコンテキストより上に表示するトップレイヤーでのレンダリング、:popover-open 疑似クラス、toggle イベントを追加します。auto モードはライトディスミスされ、manual モードは明示的な操作が必要です。アクセシビリティ、フォーカス、z-index を適切に処理できる 1 つの HTML プリミティブで、ほとんどの独自モーダル・ツールチップライブラリを置き換えられます。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「Popover API」レッスンは無料ですか？
はい。「Popover API」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「Popover API」で何を学びますか？
ネイティブのpopover属性でツールチップとダイアログを作成します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Popover API」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。