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


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

This component supports all common props.



There are 4 side options to choose from.

Side offset

Control the side offset distance.


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.