Popover

Popovers provide the container and styles to overlay menus, tooltips, controls or text. They’re visually represented as a layer above other components and objects in a view, and float above a content view after being triggered by a click-event (or hover) such as a button, link, menu or icon. Popovers can contain range of content from simple text strings to inputs, or lightly structured content and imagery/illustration. It’s usage depends on the context.

When to use

  • Describe the difference between visually similar elements.
  • Hide information that's irrelevant once the user if familiar with the UI.

Accessibility

  • The anchor will be focusable and user can tab to it using their keyboard.
  • When triggerType="hover" focusing on the anchor will open the tooltip automatically
  • When triggerType="click" a focused tooltip can be triggered via spacebar (assuming the anchor is a button)
  • Both the escape key and clicking outside the popover will close it
  • Supports a prop accessibilityType: 'none' | 'menu' | 'tooltip' that defaults to menu
  • When used as a menu, the anchor will have aria-haspopup="true" aria-expanded="true" aria-controls="popover-id" and the popover will have id="popover-id"
  • When used as a tooltip, the anchor will have id="jzowpv-anchor" aria-describedby="jzowpv-popover" and the popover will have id="jzowpv-popover" aria-ownedby="jzowpv-anchor" role="tooltip" (note that jzowpv is a random uuid generated at runtime).
  • When accessibilityType is set to none, nothing will be added so the user can do whatever they wish.

Popover stateless example

Always open

Popover opens on Click

Popover Opens on Hover

Hover

Popover Available Placements

Popover With Arrow

Popover Close from Content

Anchor ref handling example


Clipping Avoidance

Popover with Overrides

Overrides

Additionally, you can fully customize any part of the Popover through the overrides prop. The Popover consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

always open

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

Popover API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

Stateful Popover API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

Stateful Container API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>