Tooltips

Tooltips contain information to help users understand actions or page elements. They are short, and triggered by a user hovering with their keyboard or mouse over a UI element. Tooltips Design Guidelines.

Edit the code below to see your changes live!

API

Tooltip

Prop Name
Type
Default
Description
trigger *ReactNode

React Node that triggers the tooltip on hover.

placementauto | auto-end | auto-start | bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-starttop

Sets the position of the Tooltip.

Props ending with * are required

Examples

Anchor

Tooltips can wrap any Element. Tooltip will show on hover.

Span

Edit the code below to see your changes live!

Placement

Tooltip can be anchored in different directions with the placement property. It will automatically find a position if there's not enough space in the chosen direction.

Edit the code below to see your changes live!

Beta