Popover

Portal

Use a portal to render the Popover to the body of the page rather than as a sibling of the trigger. This can be useful to visually "break out" of a container with overflow or z-index styles. Note that you may have to adjust the modifiers to get the exact behavior that you want.

<ScrollParent>
  <Popover
    content={<DemoContent />}
    placement="bottom"
    usePortal
    isOpen
    modifiers={{
      preventOverflow: {
        escapeWithReference: true
      }
    }}>
    <Button>Open Popover</Button>
  </Popover>
</ScrollParent>
Light years star stuff harvesting star light citizens of distant epochs encyclopaedia galactica.