1. 6.12 popover属性
      1. 6.12.1 ポップオーバーターゲット属性
      2. 6.12.2 ポップオーバーの簡易非表示

6.12 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他のポップオーバーを閉じない。簡易非表示を持たず、閉じ要求に応答しない。
hintHintCloses other hint popovers when opened, but not other auto popovers; has light dismiss and responds to close requests.

The attribute's missing value default is the No Popover state, its invalid value default is the Manual state, and its empty value default is the Auto state.

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要素は、ポップオーバー可視状態を持ち、最初は非表示で、次の潜在的な値をもつ：

Every Document has a popover pointerdown target, which is an HTML element or null, initially null.

Every HTML element has a popover trigger, which is an HTML element or null, initially set to null.

Every HTML element has a popover hiding, which is a boolean, initially set to false.

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

Every HTML element has a popover close watcher, which is a close watcher or null, initially null.

Every HTML element has an opened in popover mode, which is "auto", "hint", or null, initially null.

Every Document has a hiding popover nesting count, which is a number, initially 0.

Every Document has a showing popover, which is a boolean, initially false.

Every Document has a hint stack parent, which is an HTML element or null, initially null.

The hint stack parent tracks which item in the showing auto popover list is the 'parent' of the first item in the showing hint popover list, or null if the first item in showing hint popover list is not 'child' to an item in the showing auto popover list.

Therefore, when the hint stack parent is not null, it will have an opened in popover mode of "auto".

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 element's popover visibility state is in the showing state and oldValue and value are in different states, then run the hide popover algorithm given element, true, true, false, and null.

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状態である場合、トップレベルのポップオーバー祖先アルゴリズムに従って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(options) method steps are:

  1. Let source be options["source"] if it exists; otherwise, null.

  2. Run show popover given this, true, and source.

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

  1. Let document be element's node document.

  2. If document's showing popover is true, or document's hiding popover nesting count is not 0:

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

    2. Return.

    This prevents showing a popover during the show or hide of another popover.

  3. Let validityResult be the result of running check popover validity given element, false, and null. If this throws an exception, catch it, and set validityResult to that exception.

  4. If validityResult is not true:

    1. If throwExceptions is true and validityResult is a DOMException, then throw validityResult.

    2. Return.

  5. Assert: element's popover trigger is null.

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

  7. Set document's showing popover to true.

  8. Let cleanupShowingSteps be the following steps:

    1. Set document's showing popover to false.

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

  10. Set validityResult to the result of running check popover validity given element, false, and document. If this throws an exception, catch it, and set validityResult to that exception.

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

  11. If validityResult is not true:

    1. Run cleanupShowingSteps.

    2. If throwExceptions is true and validityResult is a DOMException, then throw validityResult.

    3. Return.

  12. Let shouldRestoreFocus be false.

  13. Let originalType be the current state of element's popover attribute.

  14. Let ancestor be the result of running the topmost popover ancestor algorithm given element, source, and true.

  15. Let effectiveType be originalType.

  16. If all of the following are true:

    then set effectiveType to the Hint state.

    Hint popovers are lower priority than Auto popovers, so an Auto popover cannot have a Hint popover as a 'parent'. To resolve this case, the effectiveType is 'downgraded' to Hint.

  17. If effectiveType is the Auto or Hint state, then run hide popover stack until given document, ancestor, Hint, shouldRestoreFocus, and true.

  18. If effectiveType is the Auto state, then run hide popover stack until given document, ancestor, Auto, shouldRestoreFocus, and true.

  19. If effectiveType is Auto or Hint:

    1. If originalType is not equal to the value of element's popover attribute:

      1. Run cleanupShowingSteps.

      2. If throwExceptions is true, then throw an "InvalidStateError" DOMException.

      3. Return.

    2. Set validityResult to the result of running check popover validity given element, false, and document. If this throws an exception, catch it, and set validityResult to that exception.

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

    3. If validityResult is not true:

      1. Run cleanupShowingSteps.

      2. If throwExceptions is true and validityResult is a DOMException, then throw validityResult.

      3. Return.

    4. If the result of running topmost auto or hint 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.

    5. If effectiveType is Auto:

      1. Assert: document's showing auto popover list does not contain element.

      2. Set element's opened in popover mode to "auto".

      Otherwise:

      1. Assert: effectiveType is Hint.

      2. Assert: document's showing hint popover list does not contain element.

      3. Set element's opened in popover mode to "hint".

    6. Set element's popover close watcher to the result of establishing a close watcher given element's relevant global object, with:

      • cancelAction being to return true.

      • closeAction being to hide a popover given element, true, true, false, and null.

      • getEnabledState being to return true.

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

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

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

  23. If effectiveType is Hint and ancestor's opened in popover mode is "auto", then set document's hint stack parent to ancestor.

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

  25. Set element's popover trigger to source.

  26. Set element's implicit anchor element to source.

  27. Run the popover focusing steps given element.

  28. 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.

  29. Run cleanupShowingSteps.

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

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

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

    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, the newState attribute initialized to newState, and the source attribute initialized to source.

    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, true, and null.

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

  1. Let validityResult be the result of running check popover validity given element, true, and null. If this throws an exception, catch it, and let validityResult be that exception.

  2. If validityResult is not true:

    1. If throwExceptions is true and validityResult is a DOMException, then throw validityResult.

    2. Return.

  3. Let document be element's node document.

  4. Let nestedHide be element's popover hiding.

  5. Set element's popover hiding to true.

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

  7. Increment document's hiding popover nesting count.

  8. Let cleanupSteps be the following steps:

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

    2. If element's popover close watcher is not null:

      1. Destroy element's popover close watcher.

      2. Set element's popover close watcher to null.

    3. Decrement document's hiding popover nesting count.

  9. Let autoPopoverListContainsElement be true if document's showing auto popover list contains element; otherwise false.

  10. Let hintPopoverListContainsElement be true if document's showing hint popover list contains element; otherwise false.

  11. If element's opened in popover mode is "auto" or "hint":

    1. If hintPopoverListContainsElement is true, then run hide popover stack until given document, element, Hint, focusPreviousElement, and fireEvents.

    2. If element is document's hint stack parent, then run hide popover stack until given document, null, Hint, focusPreviousElement, and fireEvents.

      If the document's hint stack parent is being hidden, then all hint popovers are hidden.

    3. If autoPopoverListContainsElement is true, then run hide popover stack until given document, element, Auto, focusPreviousElement, and fireEvents.

    4. Set validityResult to the result of running check popover validity given element, true, and null. If this throws an exception, catch it, and set validityResult to that exception.

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

    5. If validityResult is not true:

      1. Run cleanupSteps.

      2. If throwExceptions is true and validityResult is a DOMException, then throw validityResult.

      3. Return.

  12. If fireEvents is true:

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

    2. Set validityResult to the result of running check popover validity given element, true, and null. If this throws an exception, catch it, and set validityResult to that exception.

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

    3. If validityResult is not true:

      1. Run cleanupSteps.

      2. If throwExceptions is true and validityResult is a DOMException, then throw validityResult.

      3. Return.

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

    5. Set element's implicit anchor element to null.

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

  14. Set element's popover trigger to null.

  15. Set element's opened in popover mode to null.

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

  17. If element is document's hint stack parent, or document's showing hint popover list is empty, then set document's hint stack parent to null.

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

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

  20. If previouslyFocusedElement is not null:

    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.

  21. Run cleanupSteps.

The togglePopover(options) method steps are:

  1. Let force be null.

  2. If options is a boolean, set force to options.

  3. Otherwise, if options["force"] exists, set force to options["force"].

  4. Let source be options["source"] if it exists; otherwise, null.

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

  6. Otherwise, if force is null or true, then run show popover given this, true, and source.

  7. Otherwise:

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

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

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

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

  1. Let endpointIsHint be true if document's showing hint popover list contains endpoint; otherwise false.

  2. Run hide popover stack until given document, endpoint, Hint, focusPreviousElement, and fireEvents.

  3. If endpointIsHint is true, then return.

  4. Run hide popover stack until given document, endpoint, Auto, focusPreviousElement, and fireEvents.

To hide popover stack until, given a Document document, an HTML element or null endpoint, an Auto or Hint stackType, a boolean focusPreviousElement, and a boolean fireEvents:

  1. Let popoverList be document's showing auto popover list if stackType is Auto; otherwise document's showing hint popover list.

  2. Let lastHideIndex be 0 if popoverList does not contain endpoint; otherwise the index of endpoint in popoverList plus 1.

  3. Let toHide be a slice of popoverList from lastHideIndex, in reverse order.

  4. Let toRemain be a slice of popoverList from 0 to lastHideIndex.

  5. For each popover of toHide: run the hide popover algorithm given popover, focusPreviousElement, fireEvents, false, and null.

  6. Let newPopoverList be document's showing auto popover list if stackType is Auto; otherwise document's showing hint popover list.

  7. Let toCheck be newPopoverList in reverse order.

  8. For each popover of toCheck:

    1. If toRemain contains popover, then continue.

    2. Run the hide popover algorithm given popover, focusPreviousElement, false, false, and null.

      This happens if popovers are shown whilst hiding popovers. For example, in beforetoggle events. This is usually a developer error, so user agents are encouraged to show a warning. In this additional hiding phase, fireEvents is ignored, and false is used instead.

The hide popover stack 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 find the topmost popover ancestor, given a Node newPopoverOrTopLayerElement, an HTML element or null source, and a boolean isPopover, perform the following steps. They return an HTML element or null.

The topmost popover ancestor algorithm will return the topmost ancestor popover for the provided popover or top layer element. 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 element is the 'source' of the popover (e.g., a button with command in the Show Popover state). In this case, the popover is the "child", and the popover subtree the trigger element is in is the "parent". The trigger element 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 showing auto popover list or showing hint 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 and Hint popovers are considered.

If the provided element is a top layer element such as a dialog which is not showing as a popover, then topmost popover ancestor will only look in the node tree to find the first popover.

  1. If isPopover is true:

    1. Assert: newPopoverOrTopLayerElement is an HTML element.

    2. Assert: newPopoverOrTopLayerElement's popover attribute is not in the No Popover State or the Manual state.

    3. Assert: newPopoverOrTopLayerElement's popover visibility state is not in the popover showing state.

  2. Otherwise:

    1. Assert: source is null.

  3. Let document be newPopoverOrTopLayerElement's node document.

  4. Let combinedPopovers be document's showing auto popover list extended with document's showing hint popover list.

  5. Let popoverAncestorIndex be the index of the last item in combinedPopovers of which newPopoverOrTopLayerElement is a flat tree descendant, otherwise -1.

  6. Let sourceAncestorIndex be -1.

  7. If source is not null, then set sourceAncestorIndex to the index of the last item in combinedPopovers of which source is a flat tree descendant, otherwise -1.

  8. Let ancestorIndex be the maximum of popoverAncestorIndex and sourceAncestorIndex.

  9. If ancestorIndex is -1, then return null.

  10. Return combinedPopovers[ancestorIndex].

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 opened in popover mode is "auto" or "hint", 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 or hint popover given a Document document, perform the following steps. They return an HTML element or null.

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

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

  3. Return null.

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

  1. If the allow focus steps given subject's node document return false, then return.

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

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

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

  5. If control is null, then return.

  6. Run the focusing steps given control.

  7. Let topDocument be control's node navigable's top-level traversable's active document.

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

  9. Empty topDocument's autofocus candidates.

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

To check popover validity for an HTML element element given a boolean expectedToBeShowing 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 throw a "NotSupportedError" DOMException.

  2. If any of the following are true:

    then return false.

  3. If any of the following are true:

    then throw an "InvalidStateError" DOMException.

  4. Return true.

To get the showing auto popover list for a Document document:

  1. Let popovers be « ».

  2. For each Element element of document's top layer:

    1. If all of the following are true:

      then append element to popovers.

  3. Return popovers.

To get the showing hint popover list for a Document document:

  1. Let popovers be « ».

  2. For each Element element of document's top layer:

    1. If all of the following are true:

      then append element to popovers.

  3. Return popovers.

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

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

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

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

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

この属性の欠損値のデフォルトと無効値のデフォルトは、両方ともToggle状態である。

可能な限りいつでも、ポップオーバー要素が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/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?

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 and a Node eventTarget:

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

  2. If popover is null, then return.

  3. If eventTarget is a shadow-including inclusive descendant of popover and popover is a shadow-including descendant of node, then return.

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

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

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

  7. Otherwise:

    1. Let validity be the result of running check popover validity given popover, false, and null. If this throws an exception, catch it, and let validity be false.

    2. If validity 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 the result of running node's get the 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.12.2 ポップオーバーの簡易非表示

"Light dismiss" means that clicking outside of a popover whose popover attribute is in the Auto or Hint state will close the popover. This is in addition to how such popovers respond to close requests.

To light dismiss open popovers, given a PointerEvent 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. If the result of running topmost auto or hint popover given document is null, then return.

  5. If event's type is "pointerdown": set document's popover pointerdown target to the result of running topmost clicked popover given target.

  6. If event's type is "pointerup":

    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 sameTarget is false, then return.

    5. Let endpointIsHint be true if document's showing hint popover list contains ancestor; otherwise false.

    6. Run hide popover stack until given document, ancestor, Hint, false, and true.

    7. Let autoEndpoint be ancestor.

    8. If endpointIsHint is true, then set autoEndpoint to document's hint stack parent.

      This means, if a hint popover is clicked, auto popovers are closed, except those that are parent to the clicked hint popover.

    9. Run hide popover stack until given document, autoEndpoint, Auto, false, and true.

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 targetPopover be the result of running nearest inclusive target popover given node.

  3. If the result of getting the popover stack position given clickedPopover is greater than the result of getting the popover stack position given targetPopover, then return clickedPopover.

  4. Return targetPopover.

To get the popover stack position, given an HTML element popover:

  1. Let hintList be popover's node document's showing hint popover list.

  2. Let autoList be popover's node document's showing auto popover list.

  3. If popover is in hintList, then return the index of popover in hintList + the size of autoList + 1.

  4. If popover is in autoList, then return the index of popover in autoList + 1.

  5. Return 0.

To find the nearest inclusive target popover 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 or the Hint state, and targetPopover's popover visibility state is showing, then return targetPopover.

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