To implement Popover component into your project you’ll need to add the import:

import Popover from "@kiwicom/orbit-components/lib/Popover";

After adding import to your project you can use it simply like:

<Popover content="Your content">
  <Button />
</Popover>

The table below contains all types of props available in the Popover component.

• Whenever onClick fires, the component will calculate possible positions that can be applied and the first possible will be applied, if none is provided to the placement prop.

• The actions prop is a way to override the default close behavior with your own actions. Keep in mind that one of the actions should close the popover.

• The Popover component supports rendering of many different components inside its children. You can use a combination of e.g. Text, Stack, ListChoice for example:

<Popover
  content={
    <React.Fragment>
      <ListChoice
        title="Choice Title"
        description="Further description"
        icon={<Accommodation />}
        onClick={action}
      />
      <ListChoice
        title="Choice Title"
        description="Further description"
        icon={<Accommodation />}
        onClick={action}
      />
      <ListChoice
        title="Choice Title"
        description="Further description"
        icon={<Accommodation />}
        onClick={action}
      />
    </React.Fragment>
  }
>
  <Button>Open Popover</Button>
</Popover>