Skip to content

Files

Latest commit

 

History

History
58 lines (48 loc) · 2.73 KB

html-popover-attribute.md

File metadata and controls

58 lines (48 loc) · 2.73 KB

The popover attribute

Note

Built-in accessibility via keyboard behavior, tab focus management, top-layer support, and (optional) light-dismiss

The Popover API helps you build menus, selection, and tooltips. It supports:

  • Promotion to the top layer. Popovers will appear on a separate layer above the rest of the page, so you don't have to play around with z-index.
  • Light-dismiss functionality. Clicking outside of the popover area will close the popover and return focus.
  • Default focus management. Opening the popover makes the next tab stop inside the popover.
  • Accessible keyboard bindings. Hitting the esc key or double toggling will close the popover and return focus.
  • Accessible component bindings. Connecting a popover element to a popover trigger semantically.
<button invoketarget="actions">Actions</button>
<div role="menu" id="actions" popover>
  <button role="menuitem" tabindex=-1 autofocus>Edit</button>
  <button role="menuitem" tabindex=-1>Hide</button>
  <button role="menuitem" tabindex=-1>Delete</button>
</div>

Progressively-enhanced entry/exit animation to your popovers or dialogs:

/* Transition to these styles on entry, and from these styles on exit */
[popover]:popover-open {
  opacity: 1;
  rotate: 0turn;
  transition: rotate .5s, opacity .5s, display .5s allow-discrete, overlay .5s allow-discrete;
}

/* Entry transition starts with these styles */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    rotate: 1turn;
  }
}

/* Exit transition ends with these styles */
[popover]:not(:popover-open) {
  scale: 0;
  transition: scale .3s, display .3s allow-discrete, overlay .3s allow-discrete;
}