Skip to content



The Tooltip component adds a tooltip to add context to elements on the page.

⚠️ Usage warning! ⚠️

Tooltips as a UI pattern should be our last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence.

Before adding a tooltip, please consider: Is this information essential and necessary? Can the UI be made clearer? Can the information be shown on the page by default?

Attention: we use aria-label for tooltip contents, because it is crucial that they are accessible to screen reader users. However, aria-label replaces the text content of an element in screen readers, so only use Tooltip on elements with no existing text content, or consider using title for supplemental information.

Default example

Component props

alignStringCan be either left or right.
directionStringCan be one of n, ne, e, se, s, sw, w, nw. Sets where the tooltip renders in relation to the target.
noDelayBooleanWhen set to true, tooltip appears without any delay
aria-labelStringText used in aria-label (for accessibility).
wrapBooleanUse true to allow text within tooltip to wrap.
sxSystemStyleObject{}Style to be applied to the component