Popover

View Source

Copy

Edit

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

Toggle Popover

Copy

Edit

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

asReactReactNode

Controls the default component or tag being rendered.

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.

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.

openboolean

Controls rendering of the popover.

offsetnumber

Controls the space between the popover and its anchor.

onRequestClose() => void

Called when the popover should close.

placement

'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end'

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.

innerRefany

Calls as innerRef to calculate popover’s bounds.

Props

PreviousModal NextScrim