Introduction

The Popover component displays floating content in relation to a target. Popovers appear either at the top, bottom, left or right of their target. The preferred and default side is the bottom. Popovers use smart positioning if there is not enough space.

Implementation details

The Popover uses the Positioner from Evergreen to handle the positioning logic. Internally the Popover will make sure the Popover is positioned within the viewport. This means that sometimes the Popover flips — or the Popover might move slightly to the left or right.

When creating a Popover, you must specify both:

  • Its content, by setting the content prop, and
  • Its target, as a single child element or a function

When you pass a function to the content prop you will be able to close the popover inside of the content.

Popovers Close On

  • Outside click
  • Escape key
  • The close function being called (advanced)

Basic usage

<Popover
  content={
    <Pane
      width={240}
      height={240}
      display="flex"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
    >
      <Text>PopoverContent</Text>
    </Pane>
  }
>
  <Button>Trigger Popover</Button>
</Popover>
Hide code

Focus management with bringFocusInside

When opening the Popover when bringFocusInside is true, focus will be brought inside the Popover by looking for elements with [autofocus] first, [tabindex] second and button last.

When passing a node as the Popover children, the Popover will handle focus management automatically when closing the Popover. When closing, it will return back focus on the target if nothing else has focus.

<Popover
  bringFocusInside
  content={
    <Pane
      width={320}
      height={320}
      paddingX={40}
      display="flex"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
    >
      <TextInput autoFocus width="100%" />
    </Pane>
  }
>
  <Button>Trigger Popover</Button>
</Popover>
Hide code

Close from within content

<Popover
  content={({ close }) => (
    <Pane
      width={320}
      height={320}
      paddingX={40}
      display="flex"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
    >
      <Button onClick={close}>Close</Button>
    </Pane>
  )}
>
  <Button>Trigger Popover</Button>
</Popover>
Hide code

Positioning the Popover

The Popover can be positioned on the following positions using the position prop:

  • Position.TOP
  • Position.TOP_LEFT
  • Position.TOP_RIGHT
  • Position.BOTTOM
  • Position.BOTTOM_LEFT
  • Position.BOTTOM_RIGHT
  • Position.LEFT
  • Position.RIGHT

Disable Close on Body Click

<Popover
  content={({ close }) => (
    <Pane
      width={320}
      height={320}
      paddingX={40}
      display="flex"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
    >
      <Button onClick={close}>Close</Button>
    </Pane>
  )}
  shouldCloseOnExternalClick={false}
>
  <Button>Trigger Popover</Button>
</Popover>
Hide code

Popover Props

positionenum = Position.BOTTOM
The position the Popover is on. Smart positioning might override this.
isShownbool
When true, the Popover is manually shown.
triggerenum = 'click'
Open the Popover based on click or hover. Default is click.
contentunionrequired
The content of the Popover.
childrenunionrequired
The target button of the Popover. When a function the following arguments are passed: ({ toggle: Function -> Void, getRef: Function -> Ref, isShown: Bool })
displaystring
The display property passed to the Popover card.
minWidthunion = 200
The min width of the Popover card.
minHeightunion = 40
The min height of the Popover card.
statelessPropsshape
Value type: PopoverStateless.propTypes
Properties passed through to the Popover card.
animationDurationnumber = 300
Duration of the animation.
onOpenfunc = () => {}
Function called when the Popover opens.
onClosefunc = () => {}
Function fired when Popover closes.
onOpenCompletefunc = () => {}
Function that will be called when the enter transition is complete.
onCloseCompletefunc = () => {}
Function that will be called when the exit transition is complete.
onBodyClickfunc = () => {}
Function that will be called when the body is clicked.
bringFocusInsidebool = false
When true, bring focus inside of the Popover on open.
shouldCloseOnExternalClickbool = true
Boolean indicating if clicking outside the dialog should close the dialog.