---
title: Popover
category: Overlays
---

```jsx live
render(() => {
  const [open, setOpen] = React.useState(true)
  return (
    <Box id="container">
      <Popover
        anchorElement={
          <Input onFocus={() => setOpen(true)} onBlur={() => setOpen(false)} />
        }
        renderTo="#container"
        open={open}
      >
        <Box padding={1} backgroundColor="blue-5" color="white">
          Popover Content
        </Box>
      </Popover>
    </Box>
  )
})
```

```jsx live
render(() => {
  const [open, setOpen] = React.useState(false)
  return (
    <Box
      id="scroll-container"
      height={20}
      padding={4}
      backgroundColor="backgroundSecondary"
      position="relative"
      overflow="auto"
    >
      <Text align="center">Scroll Me</Text>
      <Popover
        anchorElement={
          <Button
            title="Toggle Popover"
            marginVertical={30}
            theme="primary"
            onClick={() => setOpen((bool) => !bool)}
          />
        }
        renderTo="#scroll-container"
        open={open}
      >
        <Tooltip
          placement="bottom"
          title="Tooltip"
          renderTo="#scroll-container"
        >
          <Box padding={1} backgroundColor="blue-5" color="white">
            Popover Content
          </Box>
        </Tooltip>
      </Popover>
    </Box>
  )
})
```