Overview

Popover is a non-modal dialog that floats relative to another element. It's commonly used for displaying additional rich content on top of something. Popovers can alter their floating position to avoid overflowing the page.

info-icon
Heads up!
EzPopover is a low-level building block for building more complex interactions like context menus, custom dialogs and information overlays. Additional care should be taken to ensure the interactions you are building are accessible, in particular, when handling user events, key presses and focus.


Best Practices

Popovers should:

  • Be used to build custom overlay experiences, like context menus, custom dialogs and information overlays.
  • Follow implementation guidelines of specific accessibility patterns, such as the WAI-ARIA Disclosure Pattern or the WAI-ARIA Menu or Menu bar Pattern.
  • Be paired with appropriate keyboard event handlers to support common interactions. For example, in some pattern like dialogs and menus, pressing the Escape key should dismisses the popover if it is visible and restore focus to the trigger element.

Popovers should not:

Popover

  • Use targetRef to tell EzPopover about the element that the popover should position next to.
  • Use showArrow (optional) to positions an inner element of the popover so it appears centered relative to the reference element, usually the triangle or caret that points toward the reference element. EzPopover will automatically pick up an element decorated with the data-popper-arrow attribute and position it within the popover.
  • Use matchWidth (optional) to size the popover relative to the width of the target element.
  • Use placement (optional) to position the popover relative to the target element. Defaults to "bottom", accepts: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "top" | "bottom" | "right" | "left".
  • Use shouldCloseOnBlur (optional) to automatically call onClose when the user clicks away from the popover.
  • Use onClose (optional) to be notified when the popover closes.
Code example
Playroom

Current theme

Theme

Contents