Edit this page
[?] Component size, gzipped: 107kb

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.

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

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!

API

Popover API

accessibilityType $Keys<typeof ACCESSIBILITY_TYPE> =

Controls how this popover behaves for screen readers and other assistive devices. See the A11Y section at the bottom of this document for more details.

$Keys{ none: "none", menu: "menu", tooltip: "tooltip" }

"data-baseweb" string

id string

ignoreBoundary boolean = false

If true, popover element will not avoid element boundaries.

onMouseEnterDelay number = 200

Number of milliseconds to wait before showing the popover after mouse enters the trigger element (for triggerType hover).

onMouseLeaveDelay number = 200

Number of milliseconds to wait before showing the popover after mouse leaves the trigger element (for triggerType hover).

onClick function

Handler for click events on trigger element.

Event => mixed

overrides object = {}

Body { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$arrowOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$isAnimating boolean required
$isOpen boolean required
$popoverOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$showArrow boolean required
Arrow { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$arrowOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$isAnimating boolean required
$isOpen boolean required
$popoverOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$showArrow boolean required
Inner { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$arrowOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$isAnimating boolean required
$isOpen boolean required
$popoverOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$showArrow boolean required

placement $Keys<typeof TETHER_PLACEMENT> =

How to position the popover relative to the target.

$Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }

showArrow boolean = false

Whether or not to show the arrow pointing from the popover to the trigger.

triggerType $Keys<typeof TRIGGER_TYPE> =

Whether to toggle the popover when trigger is clicked or hovered.

$Keys{ click: "click", hover: "hover" }

mountNode HTMLElement

Where to mount the popover

HTMLElement

animateOutTime number

How long should be fade out animation in ms, default 0ms

popperOptions any

Popper options override https://popper.js.org/popper-documentation.html#Popper.Defaults eslint-disable-next-line flowtype/no-weak-types

children Node required

Content that should trigger the popover to be shown (also acts as the anchor against which the popover will be positioned).

Node

content union required

Content to render within the popover when it's shown.

One of
Node,
=> Node

isOpen boolean required

Whether or not to show the popover.

onBlur function

Handler for blur events on trigger element.

() => mixed

onClickOutside function

Handler for clicks outside the anchor/popover elements.

MouseEvent => mixed

onEsc function

Handler for click events on trigger element.

() => mixed

onFocus function

Handler for 'Esc' keypress events

() => mixed

onMouseEnter function

Handler for mouseenter events on trigger element.

() => mixed

onMouseLeave function

Handler for mouseleave events on trigger element.

() => mixed

Stateful Popover API

accessibilityType $Keys<typeof ACCESSIBILITY_TYPE> =

Controls how this popover behaves for screen readers and other assistive devices. See the A11Y section at the bottom of this document for more details.

$Keys{ none: "none", menu: "menu", tooltip: "tooltip" }

"data-baseweb" string

id string

ignoreBoundary boolean = false

If true, popover element will not avoid element boundaries.

onMouseEnterDelay number = 200

Number of milliseconds to wait before showing the popover after mouse enters the trigger element (for triggerType hover).

onMouseLeaveDelay number = 200

Number of milliseconds to wait before showing the popover after mouse leaves the trigger element (for triggerType hover).

onClick function

Handler for click events on trigger element.

Event => mixed

overrides object = {}

Body { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$arrowOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$isAnimating boolean required
$isOpen boolean required
$popoverOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$showArrow boolean required
Arrow { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$arrowOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$isAnimating boolean required
$isOpen boolean required
$popoverOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$showArrow boolean required
Inner { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$arrowOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$isAnimating boolean required
$isOpen boolean required
$popoverOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$showArrow boolean required

placement $Keys<typeof TETHER_PLACEMENT> =

How to position the popover relative to the target.

$Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }

showArrow boolean = false

Whether or not to show the arrow pointing from the popover to the trigger.

triggerType $Keys<typeof TRIGGER_TYPE> =

Whether to toggle the popover when trigger is clicked or hovered.

$Keys{ click: "click", hover: "hover" }

mountNode HTMLElement

Where to mount the popover

HTMLElement

animateOutTime number

How long should be fade out animation in ms, default 0ms

popperOptions any

Popper options override https://popper.js.org/popper-documentation.html#Popper.Defaults eslint-disable-next-line flowtype/no-weak-types

children Node required

Content that should trigger the popover to be shown (also acts as the anchor against which the popover will be positioned).

Node

content union required

Content to render within the popover when it's shown.

One of
Node,
close function required () => undefined
 => Node

dismissOnClickOutside boolean = true

Whether to hide the popover when the user clicks anywhere outside the trigger/popover.

dismissOnEsc boolean = true

Whether to hide the popover when the user presses the escape key.

initialState object

Initial state populated into the component

isOpen boolean required

onClose function

Event handler when popover is hidden.

() => mixed

onOpen function

Event handler when popover is shown.

() => mixed

stateReducer function = (_, nextState) => undefined

Reducer function to manipulate internal state updates.

function
$Keys{ open: "open", close: "close" },
isOpen boolean required
,
isOpen boolean required
=>
isOpen boolean required

Stateful Container API

children function required

$Diff
accessibilityType $Keys{ none: "none", menu: "menu", tooltip: "tooltip" }
"data-baseweb" string
id string
ignoreBoundary boolean
onMouseEnterDelay number
onMouseLeaveDelay number
onClick function Event => mixed
overrides
Body { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$arrowOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$isAnimating boolean required
$isOpen boolean required
$popoverOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$showArrow boolean required
Arrow { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$arrowOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$isAnimating boolean required
$isOpen boolean required
$popoverOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$showArrow boolean required
Inner { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$arrowOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$isAnimating boolean required
$isOpen boolean required
$popoverOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$showArrow boolean required
placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
showArrow boolean
triggerType required $Keys{ click: "click", hover: "hover" }
mountNode HTMLElement
animateOutTime number
popperOptions any
&
children required Node
content union required One of
Node,
=> Node
isOpen boolean required
onBlur function () => mixed
onClickOutside function MouseEvent => mixed
onEsc function () => mixed
onFocus function () => mixed
onMouseEnter function () => mixed
onMouseLeave function () => mixed
,
children required Node
 => Node

Popover exports

You can import this module like so:

import {StatefulPopover} from 'baseui/popover'

It exports the following components or utility functions:

  • StatefulPopover
  • StatefulContainer
  • Popover
  • ACCESSIBILITY_TYPE
  • PLACEMENT
  • TRIGGER_TYPE
  • STATE_CHANGE_TYPE
  • ANIMATE_IN_TIME
  • ANIMATE_OUT_TIME
  • StyledArrow
  • StyledBody
  • StyledInner
  • StyledPadding