EDS – Equinor Design System

A popover is a floating card that provides more information or actions on hover or click.

Guidelines

A popover provides excess or additional information that did not fit in the main content area. A popover always has an indicator (caret) towards the area it is attached to. Popovers should never be wider than 560px and their height should not be taller than 80% of the screen.

To dismiss a popover, use the close icon, press the ESC key, open another popover or click outside the popover. If there are no actions in the popover, then the close icon should be the first focusable element.

Don’t

  • Do not use for a single short line of text, use a Tooltip instead.
  • Do not have multiple popovers open at the same time.
FigmaExternal linkFigma design of popover

✏️ Edit this page on GitHub