COMPONENTS

Popover

Popover displays nonessential information in a temporary window. It can include rich content such as titles, long definitions, scrollbars, hyperlinks, and images.

popover-intro.png
popover-anatomy.png
  1. Container
  2. Title
  3. Content
  4. Tip

There are two types of popovers — standard and dismissible. Both types can either show or hide the tip point. Standard popovers can be dismissed by either moving the cursor or selecting anywhere outside of the popover. Dismissible popovers can only be closed by selecting the close icon.

popover-variations.png

Popovers can be placed to the top, right, left or bottom of their related content.

popover-direction.png

When used above a dark background a popover should use reverse coloring.

popover-dark-background.png

Popovers can be displayed in medium and small sizes.

popover-sizes.png
  • Do not use for short text, instead use Tooltip.
  • Do not hide important or essential content inside of a popover.