Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
131 lines (103 sloc) 4.41 KB

import Example from '../../components/example'; import API from '../../components/api'; import Layout from '../../components/layout';

import Stateless from 'examples/popover/stateless.js'; import StatefulClick from 'examples/popover/stateful-click.js'; import StatefulHover from 'examples/popover/stateful-hover.js'; import Placements from 'examples/popover/placements.js'; import WithArrow from 'examples/popover/with-arrow.js'; import Dismiss from 'examples/popover/dismiss.js'; import Clipping from 'examples/popover/clipping.js'; import Customization from 'examples/popover/overrides.js'; import AnchorRefHandling from 'examples/popover/ref-handling.js';

import Overrides from '../../components/overrides'; import {Popover, PLACEMENT} from 'baseui/popover'; import * as PopoverExports from 'baseui/popover'; import {Block} from 'baseui/block'; import {Paragraph1, Label1} from 'baseui/typography';

export default Layout;


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.


  • 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.



<Overrides name="Popover" blacklisted={['Padding']} component={PopoverExports} renderExample={props => ( <Popover isOpen content={hello world} showArrow placement={PLACEMENT.right} overrides={props.overrides} > always open )} />


<API heading="Popover API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/popover/popover.js')} />

<API heading="Stateful Popover API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/popover/stateful-popover.js')} />

<API heading="Stateful Container API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/popover/stateful-container.js')} />

You can’t perform that action at this time.