Skip to content
Work in progress - do not use in production. This component is still being built: it is not flagged Ready for Dev, so its markup, attributes, events and styles can all still change without notice, it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work can be seen and reviewed - nothing more.

Popover

A popover component for showing contextual overlays (tooltips, menus, dropdowns).

Usage

 
<section is="root-popover" aria-label="Menu">
  <button type="button" trigger>Open</button>
  <section popover>
    <ul>
      <li><button type="button">Action 1</button></li>
      <li><button type="button">Action 2</button></li>
    </ul>
  </section>
</section>

Attributes
Attribute Type Default Description
position 'top' | 'bottom' | 'left' | 'right' 'bottom' Popover position
open boolean false Popover visibility
aria-label string - Accessible label

Events
Event Detail Description
root-popover.show - Fired when popover opens
root-popover.hide - Fired when popover closes
root-popover.open { trigger } Fired when the popover opens
root-popover.close { trigger } Fired when the popover closes

Methods
Method Description
show() Open the popover
hide() Close the popover

Extends

HTMLElement - use with <section is="root-popover">.