Popover can be used to display some content on top of another

trigger

() => {
  const trigger = useCallback(({ toggle, referenceProps, referenceRef }: PopoverTriggerProps) => {
    return (
      <Button ref={referenceRef} {...referenceProps} onClick={toggle}>
        Show Popover
      </Button>
    );
  }, []);

  return (
    <Box>
      <Popover trigger={trigger}>Popover</Popover>
    </Box>
  );
}

Popover

() => {
  const trigger = useCallback(
    ({ toggle, referenceRef, referenceProps }: PopoverTriggerProps) => (
      <Button variant="secondary" ref={referenceRef} {...referenceProps} onClick={toggle}>
        Show Popover
      </Button>
    ),
    []
  );

  return (
    <Box display="flex" flexDirection="column">
      <Box mb="15px">
        <Popover trigger={trigger} placement="top">
          Popover top
        </Popover>
      </Box>
      <Box mb="15px">
        <Popover trigger={trigger} placement="left">
          Popover left
        </Popover>
      </Box>
      <Box mb="15px">
        <Popover trigger={trigger} placement="right">
          Popover right
        </Popover>
      </Box>
      <Box mb="15px">
        <Popover trigger={trigger} placement="bottom" width="200px">
          Popover bottom
        </Popover>
      </Box>
    </Box>
  );
}

By default Popover comntent will display under the trigger element, this can be changed with the \`placement\` property


Placement

() => {
  return (
    <Box>
      <Popover
        trigger={({ toggle, referenceProps, referenceRef }) => (
          <StyledButton ref={referenceRef} {...referenceProps} style={{ width: '320px', textAlign: 'center' }} onClick={toggle}>
            Show Popover
          </StyledButton>
        )}
        matchWidth
      >
        Popover
      </Popover>
    </Box>
  );
}

If \`matchWidth\` property is defined, the Popover component will match the width of the trigger element


matchWidth

() => {
  return (
    <Box>
      <Popover
        trigger={({ toggle, referenceProps, referenceRef }) => (
          <Button ref={referenceRef} {...referenceProps} onClick={toggle}>
            Show Popover
          </Button>
        )}
        maxHeight={480}
      >
        <Box display="flex" p="$16" height="100%" alignItems="center" minHeight={80}>
          Content
        </Box>
      </Popover>
    </Box>
  );
}

Define \`maxHeight\` or \`maxWidth\` properties to limit the Popover content size to available screen size


fitOnScreen

() => {
  const { referenceRef, referenceProps, PopoverContent } = usePopover();

  return (
    <Box>
      <Button ref={referenceRef} {...referenceProps}>
        Controlled Popover
      </Button>
      <PopoverContent>
        <Box p="$16" borderRadius="$8" boxShadow="medium">
          Popover content
        </Box>
      </PopoverContent>
    </Box>
  );
}

An uncontrolled or optionally controlled popover can be created by using the \`usePopover\` hook. See [Hooks - usePopover](http://design-system.sema4.ai/get-started/hooks#usepopover) for more detailed documentation


Name	Description	Default
gap	Flexbox gap size	-
trigger	Trigger node	-

Popover component

Placement

match Width

fit On Screen

Popover Hook