The popover attribute is a global attribute that allows
+ authors flexibility to ensure popover functionality can be applied to elements with the most
+ relevant semantics.
The following demonstrates how one might create a popover sub-navigation list of + links, within the global navigation for a website.
+ +<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>When using popover on elements without accessibility
+ semantics, for instance the div element, authors should use the appropriate ARIA
+ attributes to ensure the popover is accessible.
The following shows the baseline markup to create a custom menu popover, where the first
+ menuitem will receive keyboard focus when the popover is invoked due to the use of the
+ autofocus attribute. Navigating the menuitems by arrow keys, and
+ activation behaviors would still need author scripting.
<button popovertarget=menu aria-haspopup=menu>Actions</button>
+ <div role=menu id=menu popover>
+ <button role=menuitem tabindex=-1 autofocus>Edit</button>
+ <button role=menuitem tabindex=-1>Hide</button>
+ <button role=menuitem tabindex=-1>Delete</button>
+</div>A popover can be useful for rendering a status message, confirming the action performed by
+ the user. The following demonstrates how one could reveal a popover in an output
+ element.
<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>Inserting a popover element into an output element will generally
+ cause screen readers to announce the content when it becomes visible. Depending on the complexity
+ or frequency of the content, this could be either useful or annoying to users of these
+ assistive technologies. Keep this in mind when using the output element or other
+ ARIA live regions to ensure the best user experience.
The popover attribute is an enumerated
attribute with the following keywords and states:
Whenever possible ensure the popover element is placed immediately after its + triggering element in the DOM. Doing so will help ensure that the popover is exposed in a logical + programmatic reading order for users of assistive technology, such as screen readers.
+The following shows how the popovertarget attribute
in combination with the popovertargetaction
- attribute can be used to show a popover:
<div popover=auto id="foo">
- This is a popover!
-</div>
-
-<button popovertarget="foo" popovertargetaction="show">
+ <button popovertarget="foo" popovertargetaction="show">
Show a popover
-</button>
+</button>
- The following shows how the popovertarget attribute
- can open and close a manual popover, which can't be closed with light dismiss:
+<article popover=auto id="foo">
+ This is a popover article!
+ <button popovertarget="foo" popovertargetaction="close">Close</button>
+</article><div popover=manual id="foo">
- This is a popover!
-</div>
+ If a popovertargetaction attribute is not
+ specified, the default action will be to toggle the associated popover. The following shows
+ how only specifying the popovertarget attribute on its
+ invoking button can toggle a manual popover between its opened and closed states. A manual
+ popover will not light dismiss:
-<button popovertarget="foo">
- Show or hide a popover
-</button><input type="button" popovertarget="foo" value="Toggle the popover">
+
+<div popover=manual id="foo">
+ This is a popover!
+</div>