Popover

An accessible Popover component that displays rich content as a result of clicking on a target.

Props

PropTypeDescription
childrenReactNodeThe content to render
sidetop | bottom | right | leftThe side to be positioned
sideOffsetNumberThe side offset to apply
alignstart | center | endThe alignment to be positioned
alignOffsetNumberThe align offset to apply
arrowOffsetNumberThe arrow offset to apply
noArrowBooleanWhether the arrow should be visible or not
collisionToleranceNumberThe collision tolerance to apply

Examples

Side

There are 4 side options to choose from.

Side offset

Control the side offset distance.

Align

There are 3 alignment options to choose from.

Align offset

Control the alignment offset distance. This only applies when the align prop is either start or end.

Arrow offset

Control the arrow offset distance.