Popover

<Relative>
  <Text textAlign="center" display="block">
    <ButtonPrimary>Hello!</ButtonPrimary>
  </Text>

  <Popover relative open={true} caret="top">
    <Popover.Content mt={2}>
      <Heading fontSize={2}>Popover heading</Heading>
      <Text as="p">Message about this particular piece of UI.</Text>
      <Button>Got it!</Button>
    </Popover.Content>
  </Popover>
</Relative>

function PopoverDemo(props) {
  const [pos, setPos] = React.useState('top')
  const [open, setOpen] = React.useState(true)

  return (
    <Box>
      <Heading as="h3" fontSize={3}>Caret Position</Heading>
      <CaretSelector current={pos} onChange={setPos} />
      <Heading as="h3" fontSize={3}>Popover Visibility</Heading>
      <Box my={2}>
        <label>
          <input type="checkbox" value={open} checked={open}
            onChange={() => setOpen(open => !open)}/> Open
        </label>
      </Box>

      <Relative pt={4}>
        <Popover relative open={open} caret={pos}>
          <Popover.Content>
            <Heading fontSize={2}><code>{pos}</code> caret</Heading>
            <Text as="p">Message about this particular piece of UI.</Text>
            <Button onClick={() => setOpen(false)}>Got it!</Button>
          </Popover.Content>
        </Popover>
      </Relative>
    </Box>
  )
}

function CaretSelector(props) {
  const choices = [
    'top',         'bottom',      'left',         'right',
    'left-bottom', 'left-top',    'right-bottom', 'right-top',
    'top-left',    'bottom-left', 'top-right',    'bottom-right'
  ].map((dir) => (
    <label>
      <input key={dir} type='radio' name='caret' value={dir}
        checked={dir === props.current} onChange={() => props.onChange(dir)} /> {dir}
    </label>
))

  return (
    <Grid gridTemplateColumns="repeat(4, auto)" gridGap={3} my={2}>
      {choices}
    </Grid>
  )
}

render(<PopoverDemo />)