Tooltip

An accessible Tooltip component that shows information related to an element when it is hovered or focused.

Props

PropTypeDescription
childrenReactNodeThe content to render as target
labelStringThe content to render in the Tooltip
ariaLabelStringThe content to render in the arial-label attributex
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.

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.

Arrow offset

Control the arrow offset distance.