ポップオーバーとダイアログ

ポップオーバーは popover 属性を持つ要素で、ツールチップ、アラート、トーストなど、さまざまなインタラクティブ パターンに役立ちます。

<div id="my-popover" popover>My popover content</div>

popover 属性はデフォルトで要素を非表示にするため、ユーザーが要素を開く方法を提供する必要があります。ポップオーバーは最上位レイヤに配置され、他のすべてのコンテンツの上に表示されますが、モーダルではありません。つまり、ポップオーバーの外側のコンテンツを操作できます。

ポップオーバーの制御

さまざまな種類のポップオーバーとその動作について説明する前に、ポップオーバーを開閉する方法について説明します。

宣言的に

ポップオーバーは、JavaScript を使用せずに、ボタン（および button タイプの入力）と popovertarget 属性を使用して、HTML で完全に制御できます。

前のコード スニペットのポップオーバーの id は my-popover です。これを使用してポップオーバーを参照できます。

<button popovertarget="my-popover">Toggle</button>

popovertargetaction="show" と popovertargetaction="hide" を使用して、ボタンでポップオーバーを開くか閉じるかを指定することもできます。

JavaScript を使用する

JavaScript を使用してポップオーバーを制御することもできます。これは、ユーザーがボタンをクリックした以外の操作に応じてポップオーバーを表示する場合に便利です。これを行うには、ポップオーバー要素を取得してから、showPopover()、hidePopover()、または togglePopover() を呼び出す必要があります。

ポップオーバーの種類

サイトにポップオーバーを追加する際は、考慮すべきインタラクションが多数あります。どのように開きますか？ユーザーがこの通知を閉じるにはどうすればよいですか？開いている他のポップオーバーはどうなりますか？ポップオーバーには 3 種類あり、ユースケースに必要な動作とインタラクションを提供するタイプを選択できます。

自動ポップオーバー

自動ポップオーバーは最も多くの機能が組み込まれており、タイプを指定しない場合のデフォルトです。

<div id="popover" popover>My popover</div>

多くの場合、複数のポップオーバーを同時に開くことは望ましくないため、自動ポップオーバーは開いたときに他の自動ポップオーバーを閉じます。また、ポップオーバーの外側をクリックすると自動的に閉じる「ライト ディスミス」もサポートしています。Esc キーで閉じることもできます。

手動ポップオーバー

自動ポップオーバーの動作は多くのユースケースに対応していますが、ポップオーバーをより細かく制御する必要がある場合もあります。手動ポップオーバーでは、制御の自由度が高くなりますが、動作の責任も大きくなります。

<div id="popover" popover="manual">My popover</div>

このポップオーバーは明示的に閉じない限り閉じません。ライト ディスミスや Esc キーで閉じることはできません。複数のポップオーバーを同時に開くことはできます。

ヒント ポップオーバー

ポップオーバーを使用して、ページにツールチップを追加することもできます。このパターンでは、項目にカーソルを合わせると説明が表示されるようにします。一度に開くことができるのは 1 つのみです。自動ポップオーバーを使用している場合、1 つを開くと、開いている他の自動ポップオーバーはすべて閉じられます。手動ポップオーバーを使用する場合は、他のポップオーバーを閉じるなど、多くの動作を手動で実装する必要があります。ヒント ポップオーバーは、自動ポップオーバーと同様の動作をする 3 つ目のオプションを提供します。ただし、ヒントのポップオーバーを開いても、自動ポップオーバーは閉じません。

<div id="popover" popover="hint">My popover</div>

ヒント ポップオーバーは、メイン コンテンツの補足情報として役立ちます。ヒントのポップオーバーは、ホバーやフォーカスなどのクリック以外のイベントでトリガーすることがよくあります。

ポップオーバーの配置

デフォルトでは、ポップオーバーは画面の中央に開きます。最上位レイヤに追加され、他のすべてのコンテンツの上に表示されます。ビューポートに対する相対位置を指定できます。

ポップオーバーは、通常、ポップオーバーをトリガーするアイテムの近くに配置したいので、この方法は必ずしも理想的ではありません。アンカーの配置を使用すると、この処理を行うことができます。

アンカーの配置には、アンカー要素を定義する手順と、そのアンカーに対する要素の相対的な配置を行う手順の 2 つがあります。ポップオーバーは、暗黙的なアンカーを設定することで、最初の手順を処理できます。<button popovertarget> を使用してポップオーバーを開くと、ボタンが暗黙的なアンカーになります。JavaScript を使用してポップオーバーを開く場合は、source オプションを使用して暗黙的なアンカーを設定できます。

デフォルトでは、ポップオーバーは margin: auto を使用して中央に配置されます。アンカー ポジショニングを使用するには、margin: unset を設定してオーバーライドする必要がある場合があります。

スタイルとアニメーション

::backdrop 疑似要素

ポップオーバーは、ページ上の他のすべてのコンテンツの上に最上位レイヤで開きます。ポップオーバーの下には、スタイル設定可能な ::backdrop 疑似要素があります。

ポップオーバーの外側のコンテンツは非アクティブではなく、ボタンをクリックしたり、キーボードを使用してページを移動したりできます。ページの内容を隠さないでください（強いぼかし効果を適用したり、背景を不透明な色に設定したりしないでください）。

::popover-open 疑似クラス

CSS グリッドを使用してポップオーバーのコンテンツをレイアウトするとします。[popover]{ display: grid } を追加すると、すべてのポップオーバーが表示されます。これは、ポップオーバーが display: none を使用して非表示になっているためです。:popover-open 疑似クラスを使用すると、ポップオーバーが開いている場合にのみスタイルを適用できます。

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open は、ポップオーバーをアニメーション化する場合にも便利です。

ポップオーバーのアニメーション化

ポップオーバーのアニメーションには 3 つのステップがあります。

1. @starting-style {popover:popover-open { } } - ポップオーバーが表示された直後の初期スタイル。これは、スタイルシートの #2 の後に定義する必要があります。
2. popover:popover-open { } - ポップオーバーが開いているときのスタイル。
3. popover { } - ポップオーバーが閉じるときに移行するスタイル。

ポップオーバーが開いていないときは、display: none を使用して非表示にします。これをアニメーション化するには、transition-behavior: allow-discrete を設定し、transition のプロパティのリストに display を追加する必要があります。

暗黙的なアンカーを使用してポップオーバーを配置する場合は、transition のプロパティのリストに overlay も追加する必要があります。ポップオーバーが最上位レイヤから削除されると、暗黙的なアンカー関係も削除されます。そのため、overlay プロパティにトランジションを追加すると、終了トランジションが完了するまで削除が遅延します。

ポップオーバー間のインタラクション

1 つのページに複数のポップオーバーが表示されることが多く、それらの動作はポップオーバーのタイプと使用方法によって異なります。

ネストされたポップオーバー

場合によっては、別のポップオーバー内からポップオーバーを開く必要があります。たとえば、ポップオーバー メニューがあり、メニュー項目の 1 つがサブメニューを開く場合があります。ユーザーがメインメニューを閉じるときに、サブメニューが開いたままにならないようにします。ポップオーバーを使用すると、この処理を自動的に行うことができます。

ヒント ポップオーバーからヒント ポップオーバーを開く場合、または自動ポップオーバーから自動ポップオーバーを開く場合、ポップオーバーはスタックに配置されます。ポップオーバーを閉じると、スタック内の後続のポップオーバーもすべて閉じます。これはライト ディスミスでも機能します。ポップオーバーをクリックすると、スタック内のそれ以降のポップオーバーはすべて閉じますが、それ以前のポップオーバーは開いたままになります。

ソース要素がポップオーバー内にある場合、ポップオーバーはスタックに追加されます。ソース要素は、ボタンで popovertarget を使用する場合、または JavaScript で .showPopover({source}) または .togglePopover({source}) を呼び出すときに source オプションを設定する場合に自動的に設定されます。

自動ポップオーバー用のスタックと、ヒント ポップオーバー用のスタックが別々にあります。ただし、自動ポップオーバー内からヒント ポップオーバーを開くと、自動スタックに追加されます。

ヒントのポップオーバーは、単純な一時的な情報を対象としているため、ヒントのポップオーバーから自動ポップオーバーをトリガーすることはできません。

手動ポップオーバーを使用している場合は、これらすべてを手動で管理する必要があります。

他のポップオーバー タイプを閉じる

自動ポップオーバーを開くと他の自動ポップオーバーが閉じられることは学びましたが、異なるタイプはどのように相互作用するのでしょうか？3 つのタイプすべてを使用するページの例で、この点について詳しく見てみましょう。自動ポップオーバーを使用して開閉するボタンを含むナビゲーション メニューがあります。ページに、ヒント ポップオーバーを使用してコンテキスト ツールチップを表示するテキストがあります。最後に、バックグラウンド タスクが完了したことをユーザーに知らせる手動ポップオーバー付きのトーストがあります。

ツールチップは一時的なもので、テキストにマウスカーソルを合わせたときに表示されます。一度に表示されるツールチップは 1 つのみで、2 つ目のヒント ポップオーバーをトリガーすると、最初のヒント ポップオーバーが閉じます。

ボタンをクリックしてメニューを開くと、ヒントが閉じる理由は 2 つあります。まず、ヒントの外側をクリックすると、ヒントが閉じます。2 つ目は、自動ポップオーバーを開くと、開いているすべてのヒント ポップオーバーが閉じられることです。これは、ユーザーがフォーカスしている内容が変更され、ヒント ポップアップの短いコンテンツが関連しなくなったためです。つまり、自動ポップオーバーで showPopover() を呼び出すと、開いているヒント ポップオーバーが閉じます。

プルダウン メニューは自動ポップオーバーです。プルダウン メニューでは、一度に開くのは 1 つだけで、1 つを開くと他のメニューは閉じます。ご覧のとおり、自動ポップオーバーを開くと、開いているヒント ポップオーバーも閉じられます。

ただし、プルダウン メニューが開いている間も、関連のないツールチップの内容を表示したい場合があります。ヒントのツールチップを表示しても、自動ポップオーバーは閉じません。

手動ポップオーバーは自動ポップオーバーやヒント ポップオーバーの影響を受けず、開いてもヒント ポップオーバーや自動ポップオーバーが閉じられることはありません。ただし、ボタンをクリックして手動ポップオーバーを開くと、ヒントと自動ポップオーバーの軽い閉じるがトリガーされます。

ポップオーバー タイプ間のインタラクションは複雑に見えるかもしれませんが、正しい状況でタイプを使用すれば、一般的な使用パターンが可能になります。ポップオーバーが想定どおりに動作しない場合は、使用しているタイプを再確認してください。

理解度を確認する