Default

<Popover
  placement="bottom"
  popover={
    <Text variant="xs" width={300}>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius autem
      aliquid cumque, mollitia incidunt totam. Id ut quae hic in quisquam,
      cupiditate iure nobis, provident minus voluptatem tenetur consequatur.
    </Text>
  }
>
  {({ onVisible, anchorRef }) => {
    return (
      <Box textAlign="center">
        <Button
          ref={anchorRef}
          variant="secondaryOutline"
          size="small"
          onClick={onVisible}
        >
          Click to display popover
        </Button>
      </Box>
    )
  }}
</Popover>

With Placement

{
  "top-start": "top-start",
  "top": "top",
  "top-end": "top-end",
  "bottom-start": "bottom-start",
  "bottom": "bottom",
  "bottom-end": "bottom-end",
  "left-start": "left-start",
  "left": "left",
  "left-end": "left-end",
  "right-start": "right-start",
  "right": "right",
  "right-end": "right-end"
}
<Popover
  popover={<Text variant="xs">Position me</Text>}
  placement="top-end"
  visible
>
  {({ onVisible, anchorRef }) => {
    return (
      <Box textAlign="center">
        <Button
          ref={anchorRef}
          variant="secondaryOutline"
          size="small"
          onClick={onVisible}
        >
          Click to display popover
        </Button>
      </Box>
    )
  }}
</Popover>
On this page
Default
With Placement