Tooltip

Contextual floating label that appears on hover or focus. Supports a title-only or title + description layout, eight arrow placements, and light / dark colour variants.

Default

Hover or focus the button to reveal the tooltip. Default placement is top with the light colour theme.

With description

Adding a description increases the internal padding and renders a secondary body line below the title.

Placements

Eight placement values control where the tooltip bubble appears and where the arrow caret points.

No arrow

Omit placement to render the tooltip bubble without a directional caret. The bubble is still positioned above the trigger by default when used inside TooltipTrigger.

Static bubble

Use the Tooltip component directly — without a trigger wrapper — when you need to render the bubble inline (e.g. in a storyboard, screenshot, or custom positioning context).

Tooltip label

Tooltips are used to describe or identify an element.

Tooltip label

Tooltips are used to describe or identify an element.