Component size, gzipped: 26kb

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

Open

Popover Opens on Hover

Hover

Popover Available Placements

Popover With Arrow

Popover Close from Content

Anchor ref handling example


Clipping Avoidance

Popover with Overrides

API

Popover props

NameTypeDescription
accessibilityType
enum
Controls how this popover behaves for screen readers and other assistive devices.
animateOutTime
number
Number of milliseconds used to fade out the popover.
autoFocus
boolean
If true, focus will shift to the first interactive element within the popover.
children
react node
The content that will trigger the popover.
content
function
The content of the popover.
focusLock
boolean
If true, focus will be locked to the popover contents.
ignoreBoundary
boolean
If true, popover element will not avoid element boundaries.
mountNode
string
Defines where to mount the popover.
onBlur
function
Called the onBlur event triggers.
onEsc
function
Called when ESC keypress triggers.
onFocus
function
Called the onFocus event triggers.
onMouseEnter
function
Called when mouseEnter triggers.
onMouseEnterDelay
number
Number of milliseconds to wait before showing the popover after mouse enters the trigger element.
onMouseLeave
function
Called when mouseLeave triggers.
onMouseLeaveDelay
number
Number of milliseconds to wait before showing the popover after mouse leaves the trigger element.
overrides
custom
Lets you customize all aspects of the component.
placement
enum
Controls how to position the popover relative to the target.
popperOptions
object
Popper options override https://popper.js.org/popper-documentation.html#Popper.Defaults.
returnFocus
boolean
If true, focus will shift back to the original element after popover closes. Set this to false if focusing the original element triggers the popover.
showArrow
boolean
If true, an arrow will be shown pointing from the popover to the trigger element.
triggerType
enum
Controls how to position the popover relative to the target.

Popover exports

You can import this module like so:

import {StatefulPopover} from 'baseui/popover'

It exports the following components or utility functions: