Popover component

Usage

Import

import { Popover } from '@passfort/castle'
content_copy
Copy

Example

If you would like to close the pop up from components within the popover itself, you can use the context to control the state.

<Popover render={() => <Box>hi</Box>}>
  <Button label="Open" />
</Popover>
<Popover render={() => <Box>hi</Box>}>
  <Button label="Open" />
</Popover>
content_copy
Copy
live example

Z-index

When nesting, you may want to set the zIndex of the nested Popover.

<Popover
  render={() => (
    <Box m={4}>
      <Popover zIndex="3000" render={() => <Box>hi</Box>}>
        <Button label="Child" />
      </Popover>
    </Box>
  )}
>
  <Button label="Parent" />
</Popover>
<Popover
  render={() => (
    <Box m={4}>
      <Popover zIndex="3000" render={() => <Box>hi</Box>}>
        <Button label="Child" />
      </Popover>
    </Box>
  )}
>
  <Button label="Parent" />
</Popover>
content_copy
Copy
live example