Skip to content
search icon
clear
Component Status

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

Demo

Activiation types

Popovers can be activated by hover or click. 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.

Remember to use both onMouseEnter and onFocus attributes to your trigger element to be able to open the popover by tab iterations. A timeout delay on onMouseEnter is recommended to avoid unwanted trigger of the popup while browsing.

Edit this page on GitHub