Popover

Keeps additional content easily accessible while not cluttering up the page.

Popover

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>

Props

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

NameTypeDefaultDescription
actionsReact.NodeActions to display in the Popover See Functional specs.
contentReact.NodeThe content to display in the Popover.
childrenReact.NodeThe reference element where the Popover will appear.
dataTeststringOptional prop for testing purposes.
idstringSet id for Popover
offsetoffset{left: 0, top: 0}Optional prop to set position offset
fixedbooleanChanges position to fixed from absolute, good for use in sticky components.
noPaddingbooleantrueAdds or removes padding around popover’s content.
openedbooleanProp for programmatically controlling Popover inner state. If opened is present open triggers are ignored.
overlappedbooleanfalseIf true, the content of Popover will overlap the trigger children.
renderInPortalbooleantrueOptional prop, set it to false if you’re rendering Popover inside a custom portal, defaults to true
widthstringWidth of popover, if undefined, it is set to auto.
maxHeightstringThe maximum height of the content of the popover, if undefined, it is set to 100%.
onClose() => void \| PromiseFunction for handling onClose.
onOpen() => void \| PromiseFunction for handling onOpen.
placement`placementbottom-start12 different placements to choose from
lockScrollingbooleantrueWhether to prevent scrolling of the rest of the page while Popover is open on mobile. This is on by default to provide a better user experience.
noFlipbooleanfalseTurns off automatic flipping of the Popover when there is not enough space
allowOverflowbooleanfalseAllows the Popover to be cut off instead of moving it while scrolling to keep it visible.
labelCloseReact.NodeCloseThe label for close button.
renderTimeoutnumber0The timeout for rendering the Popover.

enum

Placement
"top"
"right"
"bottom"
"left"
"top-start"
"top-end"
"right-start"
"right-end"
"bottom-start"
"bottom-end"
"left-start"
"left-end"
"auto"
"auto-start"
"auto-end"

offset

keyvalue
topnumber
leftnumber

Functional specs

  • Whenever event onClick fires, the script inside this component will calculate possible positions that can be applied and the first possible will be applied.

  • You can prefer one position that will be used if possible, otherwise the default order in enum table will be used.

  • You can prefer align that will be used if possible, otherwise the default order in enum table will be used.

  • Actions are a way to override default close behavior with your own actions, mainly Buttons 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>