@elemental-ui-alpha/popover v0.0.2

Popover

import { Popover, PopoverDialog, usePopoverDialog } from '@elemental-ui-alpha/popover';

Usage

Component

Most of the time you will be able to use Popover. This compound component takes a trigger element and wires it up to the dialog for you.

<Popover trigger={<Button>trigger</Button>}>
  <Box padding="medium">Some popover content</Box>
</Popover>

Hook

For situations where you need more control, like access to refs and handlers, you will need to combine the PopoverDialog with the usePopoverDialog hook.

const { isOpen, dialog, trigger } = usePopoverDialog('top');

return (
  <>
    <Button ref={trigger.ref} {...trigger.props}>
      {isOpen ? 'close' : 'open'}
    </Button>
    {isOpen && (
      <PopoverDialog ref={dialog.ref} {...dialog.props}>
        <Box padding="medium">Some popover content</Box>
      </PopoverDialog>
    )}
  </>
);

Placement

As a property of the Popover component, and the only argument to the usePopoverDialog hook.

Where, in relation to the trigger, to place the dialog:

• auto
• left
• right
• top
• bottom (default)
• auto-start
• auto-end
• top-start
• top-end
• bottom-start
• bottom-end
• right-start
• right-end
• left-start
• left-end

<Popover trigger={<Button>trigger</Button>} placement="left-start">
  <Box padding="medium" width={220}>
    <Heading level="4">Placement</Heading>
    <Text as="p" marginTop="small">
      Some popover content, that goes on for a bit to illustrate placement.
    </Text>
  </Box>
</Popover>