Popover

View Source

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>
  )
})

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>
  )
})

Scroll Me

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>
  )
})

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>
  )
})

Props

Themeable

Use the popover key in ThemeProvider to customize the default properties of this component.

anchorElementReactReactElement | unknown

The element to attach the popover to. Clones the element’s ref to calculate position relative to the optional relativeTo prop or the renderTo element.

asany

Controls the default component or tag being rendered.

innerRefunknown | signature

current:E

Calls as innerRef to calculate popover’s bounds.

keepInViewboolean

Attempts to keep popover in view clipping edges if too large.

lockScrollWhileOpenboolean

Locks external scrollbars when open.

matchWidthsboolean | 'minimum'

Matches anchor and popover widths.

offsetnumber

Controls the space between the popover and its anchor.

onRequestClose() => void

Called when the popover should close.

openboolean

Controls rendering of the popover.

placementPlacement

Where to place the popover.

relativeToany

Where to place the popover relative to. Uses renderTo by default.

renderToHTMLElement | string

Where to render the popover into. Accepts an HTML element or selector. Uses the closest fixed parent or document.body by default. This will only be computed once on initial render.

shouldFlipboolean

Determines if the popover should flip or not when it overflows.

Props

PreviousModal NextScrim