1. 6.11 popover属性
      1. 6.11.1 ポップオーバーターゲット属性
      2. 6.11.2 ポップオーバーの簡易非表示

6.11 popover属性

Global_attributes/popover

Support in all current engines.

Firefox🔰 114+Safaripreview+Chrome114+
Opera?Edge114+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

すべてのHTML要素はpopoverコンテンツ属性設定を持ってもよい。指定された場合、要素は表示されるまでレンダリングされず、表示されると、他のページ コンテンツの上にレンダリングされる。

popover属性は、最も関連性の高いセマンティックスをもつ要素にポップオーバー機能を適用できるように、著者に柔軟性を与えるグローバル属性である。

次は、ウェブサイトのグローバルナビゲーション内で、リンクのポップオーバーサブナビゲーションリストを作成する方法を示す。

<ul>
  <li>
    <a href=...>All Products</a>
    <button popovertarget=sub-nav>
     <img src=down-arrow.png alt="Product pages">
    </button>
    <ul popover id=sub-nav>
     <li><a href=...>Shirts</a>
     <li><a href=...>Shoes</a>
     <li><a href=...>Hats etc.</a>
    </ul>
  </li>
  <!-- other list items and links here -->
</ul>

popoverをアクセシビリティセマンティクスのない要素、たとえばdiv要素に使用する場合、著者は適切なARIA属性を使用して、popoverがアクセス可能であることを保証すべきである。

次は、カスタムメニューポップオーバーを作成するための基準のマークアップを示している。ここでは、autofocus属性の使用によりポップオーバーが呼び出されたとき、最初のmenuitemがキーボードフォーカスを受け取る。矢印キーとアクティブ化動作を使用してmenuitemを操作するには、著者のスクリプトが必要となる。カスタムメニューウィジェットを構築するための追加の要件は、WAI-ARIA仕様で定義される。

<button popovertarget=m>Actions</button>
<div role=menu id=m popover>
  <button role=menuitem tabindex=-1 autofocus>Edit</button>
  <button role=menuitem tabindex=-1>Hide</button>
  <button role=menuitem tabindex=-1>Delete</button>
</div>

ポップオーバーは、ユーザーが実行したアクションを確認するステータスメッセージをレンダリングするのに役立つ。次に、output要素内のポップオーバーを見せる方法を示す。

<button id=submit>Submit</button>
<p><output><span popover=manual></span></output></p>

<script>
 const sBtn = document.getElementById("submit");
 const outSpan = document.querySelector("output [popover=manual]");
 let successMessage;
 let errorMessage;

 /* define logic for determining success of action
  and determining the appropriate success or error
  messages to use */

 sBtn.addEventListener("click", ()=> {
  if ( success ) {
   outSpan.textContent = successMessage;
  }
  else {
   outSpan.textContent = errorMessage;
  }
  outSpan.showPopover();

  setTimeout(function () {
   outSpan.hidePopover();
  }, 10000);
 });
</script>

ポップオーバー要素をoutput要素に挿入すると、一般的に、スクリーンリーダーは内容が可視である場合にその内容を通知する。コンテンツの複雑さや頻度に応じて、これは、これらの支援技術のユーザーにとって有用である場合もあれば、迷惑である場合もある。output要素または他のARIAライｓブリージョンを使用して最良のユーザーエクスペリエンスを確保する場合、この点に留意すること。

popover属性は、次のキーワードと状態を持つ列挙属性である：

キーワード状態概要
autoauto開いたときに他のポップオーバーを閉じる。簡易非表示を持つ。
空文字列
manualmanual他のポップオーバーを閉じない。簡易非表示を持たない。

popover属性の不正値のデフォルトはmanual状態であり、その欠損値のデフォルトはポップオーバーなし状態である。

HTMLElement/popover

Support in all current engines.

Firefox🔰 114+Safari17+Chrome114+
Opera?Edge114+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

popover IDL属性は、既知の値に制限され、popover属性を反映しなければならない。

すべての HTML要素は、ポップオーバー可視状態を持ち、最初は非表示で、次の潜在的な値をもつ：

Documentは、ポップオーバーポインターダウンターゲットを持ち、これはHTML要素またはnullであり、最初はnullである。

すべてのHTML要素は、ポップオーバー呼び出しを持ち、これはHTML要素またはnullであり、最初はnullに設定される。

すべてのHTML要素は、表示または非表示のポップオーバーを持ち、これは真偽値で、最初はfalseに設定されている。

すべてのHTML要素ポップオーバートグルタスクトラッカー、これはトグルタスクトラッカーまたはnullで、最初はnullである。

The following attribute change steps, given element, localName, oldValue, value, and namespace, are used for all HTML elements:

  1. If namespace is not null, then return.

  2. If localName is not popover, then return.

  3. If oldValue and value are in different states, then run the hide popover algorithm given element, true, true, and false.

element.showPopover()

HTMLElement/showPopover

Support in all current engines.

Firefox🔰 114+Safari17+Chrome114+
Opera?Edge114+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
ポップオーバーelementをトップレイヤーに追加して表示する。elementのpopover属性がauto stateである場合、トップレベルのポップオーバー祖先アルゴリズムに従ってelementの祖先でない限り、他のすべてのautoポップオーバーも閉じられる。
element.hidePopover()

HTMLElement/hidePopover

Support in all current engines.

Firefox🔰 114+Safari17+Chrome114+
Opera?Edge114+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
ポップオーバーelementをトップレイヤーから削除し、display:noneを適用して非表示にする。
element.togglePopover()

HTMLElement/togglePopover

Support in all current engines.

Firefox🔰 114+Safari17+Chrome114+
Opera?Edge114+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
ポップオーバーelementが表示されていない場合、このメソッドはそのポップオーバーを表示する。そうでなければ、このメソッドによって非表示になる。このメソッドは、呼び出し後にポップオーバーが開いている場合はtrueを返し、そうでなければfalseを返す。

The showPopover() method steps are to run show popover given this, true, and null.

To show popover, given an HTML element element, a boolean throwExceptions, and an HTML element or null invoker:

  1. If the result of running check popover validity given element, false, throwExceptions, and null is false, then return.

  2. Let document be element's node document.

  3. Assert: element's popover invoker is null.

  4. Assert: element is not in document's top layer.

  5. Let nestedShow be element's popover showing or hiding.

  6. Set element's popover showing or hiding to true.

  7. Let cleanupShowingFlag be the following steps:

    1. If nestedShow is false, then set element's popover showing or hiding to false.

  8. If the result of firing an event named beforetoggle, using ToggleEvent, with the cancelable attribute initialized to true, the oldState attribute initialized to "closed", and the newState attribute initialized to "open" at element is false, then run cleanupShowingFlag and return.

  9. If the result of running check popover validity given element, false, throwExceptions, and document is false, then run cleanupShowingFlag and return.

    Check popover validity is called again because firing the beforetoggle event could have disconnected this element or changed its popover attribute.

  10. Let shouldRestoreFocus be false.

  11. If element's popover attribute is in the auto state, then:

    1. Let originalType be the value of element's popover attribute.

    2. Let ancestor be the result of running the topmost popover ancestor algorithm given element and invoker.

    3. If ancestor is null, then set ancestor to document.

    4. Run hide all popovers until given ancestor, false, and not nestedShow.

    5. If originalType is not equal to the value of element's popover attribute, then throw a "InvalidStateError" DOMException.

    6. If the result of running check popover validity given element, false, throwExceptions, and document is false, then run cleanupShowingFlag and return.

      Check popover validity is called again because running hide all popovers until above could have fired the beforetoggle event, and an event handler could have disconnected this element or changed its popover attribute.

    7. If the result of running topmost auto popover on document is null, then set shouldRestoreFocus to true.

      This ensures that focus is returned to the previously-focused element only for the first popover in a stack.

  12. Set element's previously focused element to null.

  13. Let originallyFocusedElement be document's focused area of the document's DOM anchor.

  14. Add an element to the top layer given element.

  15. Set element's popover visibility state to showing.

  16. Set element's popover invoker to invoker.

  17. Run the popover focusing steps given element.

  18. If shouldRestoreFocus is true and element's popover attribute is not in the no popover state, then set element's previously focused element to originallyFocusedElement.

  19. Queue a popover toggle event task given element, "closed", and "open".

  20. Run cleanupShowingFlag.

To queue a popover toggle event task given an element element, a string oldState, and a string newState:

  1. If element's popover toggle task tracker is not null, then:

    1. Set oldState to element's popover toggle task tracker's old state.

    2. Remove element's popover toggle task tracker's task from its task queue.

    3. Set element's popover toggle task tracker to null.

  2. Queue an element task given the DOM manipulation task source and element to run the following steps:

    1. Fire an event named toggle at element, using ToggleEvent, with the oldState attribute initialized to oldState and the newState attribute initialized to newState.

    2. Set element's popover toggle task tracker to null.

  3. Set element's popover toggle task tracker to a struct with task set to the just-queued task and old state set to oldState.

The hidePopover() method steps are:

  1. Run the hide popover algorithm given this, true, true, and true.

To hide a popover given an HTML element element, a boolean focusPreviousElement, a boolean fireEvents, and a boolean throwExceptions:

  1. If the result of running check popover validity given element, true, throwExceptions, and null is false, then return.

  2. Let document be element's node document.

  3. Let nestedHide be element's popover showing or hiding.

  4. Set element's popover showing or hiding to true.

  5. If nestedHide is true, then set fireEvents to false.

  6. Let cleanupHidingFlag be the following steps:

    1. If nestedHide is false, then set element's popover showing or hiding to false.

  7. If element's popover attribute is in the auto state, then:

    1. Run hide all popovers until given element, focusPreviousElement, and fireEvents.

    2. If the result of running check popover validity given element, true, and throwExceptions is false, then run cleanupHidingFlag and return.

      Check popover validity is called again because running hide all popovers until could have disconnected element or changed its popover attribute.

  8. Set element's popover invoker to null.

  9. If fireEvents is true:

    1. Fire an event named beforetoggle, using ToggleEvent, with the oldState attribute initialized to "open" and the newState attribute initialized to "closed" at element.

    2. If the result of running check popover validity given element, true, throwExceptions, and null is false, then run cleanupHidingFlag and return.

      Check popover validity is called again because firing the beforetoggle event could have disconnected element or changed its popover attribute.

    3. Request an element to be removed from the top layer given element.

  10. Otherwise, remove an element from the top layer immediately given element.

  11. Set element's popover visibility state to hidden.

  12. If fireEvents is true, then queue a popover toggle event task given element, "open", and "closed".

  13. Let previouslyFocusedElement be element's previously focused element.

  14. If previouslyFocusedElement is not null, then:

    1. Set element's previously focused element to null.

    2. If focusPreviousElement is true and document's focused area of the document's DOM anchor is a shadow-including inclusive descendant of element, then run the focusing steps for previouslyFocusedElement; the viewport should not be scrolled by doing this step.

  15. Run cleanupHidingFlag.

The togglePopover(force) method steps are:

  1. If this's popover visibility state is showing, and force is not present or false, then run the hide popover algorithm given this, true, true, and true.

  2. Otherwise, if force is not present or true, then run show popover given this true, and null.

  3. Otherwise:

    1. Let expectedToBeShowing be true if this's popover visibility state is showing; otherwise false.

    2. Run check popover validity given expectedToBeShowing, true, and null.

  4. Return true if this's popover visibility state is showing; otherwise false.

To hide all popovers until, given an HTML element or Document endpoint, a boolean focusPreviousElement, and a boolean fireEvents:

  1. Let document be endpoint's node document.

  2. Let closeAllOpenPopovers be an algorithm which performs the following steps:

    1. Let popover be document's topmost auto popover.

    2. While popover is not null:

      1. Run the hide popover algorithm given popover, focusPreviousElement, fireEvents, and false.

      2. Set popover to document's topmost auto popover.

  3. If endpoint is a Document, then run closeAllOpenPopovers and return.

  4. Assert: endpoint's popover attribute is in the auto state.

  5. Let repeatingHide be false.

  6. Perform the following steps at least once:

    1. Let lastToHide be null.

    2. Let foundEndpoint be false.

    3. For each popover in document's auto popover list:

      1. If popover is endpoint, then set foundEndpoint to true.

      2. Otherwise, if foundEndpoint is true, then set lastToHide to popover and break.

    4. If foundEndpoint is false, then run closeAllOpenPopovers and return.

    5. While lastToHide is not null and lastToHide's popover visibility state is showing and document's auto popover list is not empty:

      1. Run the hide popover algorithm given document's auto popover list's last element, focusPreviousElement, fireEvents, and false.

    6. Set repeatingHide to true if document's auto popover list contains endpoint and document's auto popover list's last element is not endpoint, otherwise false.

    7. If repeatingHide is true, then set fireEvents to false.

    and keep performing them while repeatingHide is true.

The hide all popovers until algorithm is used in several cases to hide all popovers that don't stay open when something happens. For example, during light-dismiss of a popover, this algorithm ensures that we close only the popovers that aren't related to the node clicked by the user.

To hide all popovers, given a Document document, run hide all popovers until given document, false, and false.

To find the topmost popover ancestor, given a Node newPopover, and an HTML element or null invoker, perform the following steps. They return an HTML element or null.

The topmost popover ancestor algorithm will return the topmost (latest in the auto popover list) ancestor popover for the provided popover. Popovers can be related to each other in several ways, creating a tree of popovers. There are two paths through which one popover (call it the "child" popover) can have a topmost ancestor popover (call it the "parent" popover):

  1. The popovers are nested within each other in the node tree. In this case, the descendant popover is the "child" and its topmost ancestor popover is the "parent".

  2. An invoking element (e.g., a button) has a popovertarget attribute pointing to a popover. In this case, the popover is the "child", and the popover subtree the invoking element is in is the "parent". The invoker has to be in a popover and reference an open popover.

In each of the relationships formed above, the parent popover has to be strictly earlier in the auto popover list than the child popover, or it does not form a valid ancestral relationship. This eliminates non-showing popovers and self-pointers (e.g., a popover containing an invoking element that points back to the containing popover), and it allows for the construction of a well-formed tree from the (possibly cyclic) graph of connections. Only auto popovers are considered.

  1. Let popoverPositions be an empty ordered map.

  2. indexを0にする。

  3. Let document be newPopover's node document.

  4. For each popover in document's auto popover list:

    1. Set popoverPositions[popover] to index.

    2. Increment index by 1.

  5. Set popoverPositions[newPopover] to index.

  6. Increment index by 1.

  7. Let topmostPopoverAncestor be null.

  8. Let checkAncestor be an algorithm which performs the following steps given candidate:

    1. If candidate is null, then return.

    2. Let candidateAncestor be the result of running nearest inclusive open popover given candidate.

    3. If candidateAncestor is null, then return.

    4. Let candidatePosition be popoverPositions[candidateAncestor].

    5. If topmostPopoverAncestor is null or popoverPositions[topmostPopoverAncestor] is less than candidatePosition, then set topmostPopoverAncestor to candidateAncestor.

  9. Run checkAncestor given newPopover's parent node within the flat tree.

  10. Run checkAncestor given invoker.

  11. return topmostPopoverAncestor.

To find the nearest inclusive open popover given a Node node, perform the following steps. They return an HTML element or null.

  1. Let currentNode be node.

  2. While currentNode is not null:

    1. If currentNode's popover attribute is in the auto state and currentNode's popover visibility state is showing, then return currentNode.

    2. Set currentNode to currentNode's parent in the flat tree.

  3. Return null.

To find the topmost auto popover given a Document document, perform the following steps. They return an HTML element or null.

  1. If document's auto popover list is not empty, then return document's auto popover list's last element.

  2. Return null.

To perform the popover focusing steps for an HTML element subject:

  1. If subject is a dialog element, then run the dialog focusing steps given subject and return.

  2. If subject has the autofocus attribute, then let control be subject.

  3. Otherwise, let control be the autofocus delegate for subject given "other".

  4. If control is null, then return.

  5. Run the focusing steps given control.

  6. Let topDocument be the active document of control's node document's browsing context's top-level browsing context.

  7. If control's node document's origin is not the same as the origin of topDocument, then return.

  8. Empty topDocument's autofocus candidates.

  9. Set topDocument's autofocus processed flag to true.

To check popover validity for an HTML element element given a boolean expectedToBeShowing, a boolean throwExceptions, and a Document or null expectedDocument perform the following steps. They throw an exception or return a boolean.

  1. If element's popover attribute is in the no popover state, then:

    1. If throwExceptions is true, then throw a "NotSupportedError" DOMException.

    2. falseを返す。

  2. If any of the following are true:

    then return false.

  3. If any of the following are true:

    then:

    1. If throwExceptions is true, then throw a "InvalidStateError" DOMException.

    2. falseを返す。

  4. Return true.

To get the auto popover list for a Document document:

  1. Let popovers be « ».

  2. For each Element element in document's top layer: if element's popover attribute is in the auto state and element's popover visibility state is showing, then append element to popovers.

  3. Return popovers.

6.11.1 ポップオーバーターゲット属性

ボタンには、次のコンテンツ属性を設定してもよい：

指定された場合、popovertarget属性値は、popovertarget属性をもつボタンと同じツリー内のpopover属性をもつ要素のIDでなければならない。

popovertargetaction属性は、次のキーワードと状態を持つ列挙属性である：

キーワード状態概要
toggletoggleターゲットのポップオーバー要素を表示または非表示する。
showshowターゲットのポップオーバー要素を表示する。
hidehideターゲットのポップオーバー要素を非表示にする。

popovertargetaction属性の不正値のデフォルトと欠損値のデフォルトの両方は、トグル状態である。

可能な限りいつでも、ポップオーバー要素がDOM内のトリガー要素の直後に配置されるようにする。そうすることで、ポップオーバーが、スクリーンリーダーなどの支援技術のユーザーに対して、プログラム上の論理的な読み上げ順序で公開されるようになる。

以下に、ポップオーバーを表示して閉じるために、popovertarget属性をpopovertargetaction属性と組み合わせて使用する方法を示す：

<button popovertarget="foo" popovertargetaction="show">
  Show a popover
</button>

<article popover="auto" id="foo">
  This is a popover article!
  <button popovertarget="foo" popovertargetaction="hide">Close</button>
</article>

popovertargetaction属性が指定されない場合、デフォルトのアクションは、関連付けられたポップオーバーを切り替えることになる。次に、呼び出しボタンにpopovertarget属性を指定するだけで、手動ポップオーバーを開いた状態と閉じた状態の間で切り替える方法を示す。手動ポップオーバーでは、簡易非表示にならない：

<input type="button" popovertarget="foo" value="Toggle the popover">

<div popover=manual id="foo">
  This is a popover!
</div>
DOMインターフェイス：

HTMLButtonElement/popoverTargetElement

Support in all current engines.

Firefox🔰 114+Safari17+Chrome114+
Opera?Edge114+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLInputElement/popoverTargetElement

Support in all current engines.

Firefox🔰 114+Safari17+Chrome114+
Opera?Edge114+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

popoverTargetElement IDL属性は、popovertarget属性を反映しなければならない。

HTMLButtonElement/popoverTargetAction

Support in all current engines.

Firefox🔰 114+Safari17+Chrome114+
Opera?Edge114+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

element of type="button".">HTMLInputElement/popoverTargetAction

Support in all current engines.

Firefox🔰 114+Safari17+Chrome114+
Opera?Edge114+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

popoverTargetAction IDL属性は、既知の値のみに制限される、popoverTargetAction属性を反映しなければならない。

To run the popover target attribute activation behavior given a Node node:

  1. Let popover be node's popover target element.

  2. If popover is null, then return.

  3. If node's popovertargetaction attribute is in the show state and popover's popover visibility state is showing, then return.

  4. If node's popovertargetaction attribute is in the hide state and popover's popover visibility state is hidden, then return.

  5. If popover's popover visibility state is showing, then run the hide popover algorithm given popover, true, true, and false.

  6. Otherwise, if popover's popover visibility state is hidden and the result of running check popover validity given popover, false, false, and null is true, then run show popover given popover, false, and node.

To get the popover target element given a Node node, perform the following steps. They return an HTML element or null.

  1. If node is not a button, then return null.

  2. If node is disabled, then return null.

  3. If node has a form owner and node is a submit button, then return null.

  4. Let popoverElement be node's popovertarget-associated element.

  5. If popoverElement is null, then return null.

  6. If popoverElement's popover attribute is in the no popover state, then return null.

  7. Return popoverElement.

6.11.2 ポップオーバーの簡易非表示

"簡易非表示"とは、Escキーを押すか、popover属性がauto状態のポップオーバーの外側をクリックするとポップオーバーが閉じることを意味する。

ポップオーバーのキャンセル：Documentに最上位の自動ポップオーバーが表示されている場合、ユーザー エージェントは、アクティブ化時に、最上位の自動ポップオーバー、trueおよびfalseが指定されたユーザーインタラクションタスクソースで要素タスクをキューに入れ、最上位の自動ポップオーバーが指定された非表示のポップオーバーアルゴリズムを実行するユーザーインターフェイスを提供してもよい。

To light dismiss open popovers, given an Event event:

  1. Assert: event's isTrusted attribute is true.

  2. Let target be event's target.

  3. Let document be target's node document.

  4. Let topmostPopover be the result of running topmost auto popover given document.

  5. If topmostPopover is null, then return.

  6. If event is a PointerEvent and event's type is "pointerdown", then: set document's popover pointerdown target to the result of running topmost clicked popover given target.

  7. If event is a PointerEvent and event's type is "pointerup", then:

    1. Let ancestor be the result of running topmost clicked popover given target.

    2. Let sameTarget be true if ancestor is document's popover pointerdown target.

    3. Set document's popover pointerdown target to null.

    4. If ancestor is null, then set ancestor to document.

    5. If sameTarget is true, then run hide all popovers until given ancestor, false, and true.

Light dismiss open popovers will be called by the Pointer Events spec when the user clicks or touches anywhere on the page.

To find the topmost clicked popover, given a Node node:

  1. Let clickedPopover be the result of running nearest inclusive open popover given node.

  2. Let invokerPopover be the result of running nearest inclusive target popover for invoker given node.

  3. Let getStackPosition be an algorithm which performs the following steps given an HTML element popover:

    1. Let popoverList be popover's node document's auto popover list.

    2. If popover is in popoverList, then return the index of popover in popoverList + 1.

    3. Return 0.

  4. If the result of running getStackPosition given clickedPopover is greater than the result of running getStackPosition given invokerPopover, then return clickedPopover.

  5. Return invokerPopover.

To find the nearest inclusive target popover for invoker given a Node node:

  1. Let currentNode be node.

  2. While currentNode is not null:

    1. Let targetPopover be currentNode's popover target element.

    2. If targetPopover is not null and targetPopover's popover attribute is in the auto state and targetPopover's popover visibility state is showing, then return targetPopover.

    3. Set currentNode to currentNode's ancestor in the flat tree.