Component size, gzipped: 34kb

Popover

API

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

  • Upon opening, focus will be transferred to the first interactive element (unless autofocus is set to false)
  • 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.

Examples

Popover stateless example

Always open

Popover opens on Click

Popover Opens on Hover

Popover Available Placements

Popover With Arrow

Popover Close from Content

Anchor ref handling example


Clipping Avoidance

Popover with Overrides

SSR Popover

Server-side rendered (check source!)

API

Popover props

Popover exports

You can import this module like so:

import {StatefulPopover} from 'baseui/popover'

It exports the following components or utility functions: