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>

• Button is the most common trigger component for opening and closing the popover. The Popover component renders a wrapping div with the role="button" attribute by default. Ensure that the trigger component is set as a non-interactive component (for example, using the asComponent prop) to avoid the accessibility violation of nesting interactive controls (Interactive controls must not be nested).

• The ariaLabelledby prop allows you to specify an aria-labelledby attribute for the popover content component. This attribute provides a reference to one or more elements that label the popover content. By using ariaLabelledby, the accessibility of popover component is improved and it is easier for users with assistive technologies to understand the context and purpose of the content.

• The ariaLabel prop allows you to specify an aria-label attribute for the popover content component. This attribute provides additional information to screen readers, enhancing the accessibility of the component. By using ariaLabel, you can ensure that users who rely on assistive technologies receive the necessary context and information about the component’s purpose and functionality.