Skip to main content

Tooltip

Tooltips can appear on hover, focus or click and should display very short (single-line) contextual descriptions of interface elements. You may also show Tooltips when button labels are absent (icon-only) or truncated.

Tooltips should be used to add context or extra information to a specific action in order to help the user understand the action they are performing. Tooltips should not be used for every action, but rather sparingly for more complicated or difficult to understand actions. Also all Icon Buttons should have a tooltip, since they do not have any text to help describe the action.

Example

Live Editor
Result
Loading...

Usage Rules

Do:

  • Put helpful extra information in Tooltips
  • Keep text short and direct
  • Use Tooltips to label unlabled icons
  • Use Tooltips to expand on truncated text

Don’t:

  • Put unnecessary information in Tooltips
  • Reiterate text from where the tooltip originates
  • Use Tooltips as the only place to display valuable information to the user

Variants

Close programmatically

You can programmatically close the tooltip by using the close prop. To be informed of the visibility state of the tooltip, you can use the onTooltipToggle callback. If the onTooltipToggle prop is provided, Tooltip will stay open while the close prop value is not true.

Live Editor
Result
Loading...

Customized

It's possible to render any valid React component as the Tooltip's content.

Live Editor
Result
Loading...

Customized with Icon

It's possible to render any valid React component as the Tooltip's content.

Live Editor
Result
Loading...

Delayed

Delays are used to ensure the reader is actually interested in the element, and not accidentally displaying a tooltip when navigating somewhere else.

Live Editor
Result
Loading...

Display

It is possible to ommit a tooltip whenever necessary in a easy way. When the prop display is false, it will render directly the children passed to it. The default value is true.

Live Editor
Result
Loading...

Disabled Wrapper

We have a wrapper to show the tooltip for disabled children, which can be accessed by disabledWrapper.

Live Editor
Result
Loading...

Also, if you want to use double Tooltip for special cases. then you can also use the disabledWrapper prop.

Here is an example for the Copy to Clipboard, which itself uses the tooltip internally and we are adding an additional layor of Tooltip.

Live Editor
Result
Loading...

Offset

Offset can be used for fine positioning of the tooltip, sometimes needed in niche cases, it has a default value of [0, 10], 0 is equal to centred, 10 is distance tooltip appears from reference.

note

This should only be used for small refinements.

Live Editor
Result
Loading...

Position

Readability is paramount. Choose the right position to make sure your Tooltip doesn’t cover anything important. In case there is no enough space on the screen, the Tooltip will be auto-positioned.

Live Editor
Result
Loading...

Definition Tooltips

Definition tooltips are a tooltip design pattern used to provide additional help, or to explain complex technical terms. It may be used on labels, embedded in paragraph text, or in compact spaces like table headers.

Definition tooltips used within labels and paragraph text

Best Practices

  • Use on labels where an additional info icon would clutter the UI
  • Use on proper nouns, technical terms, or acronyms with two letters or more
  • Do not use a definition tooltip on words with fewer than two letters

Props

NameTypeDefault
content *
The content of the tooltip can either be pure text or any rich content wrapped in a React component
ReactNode
position
The position of the tooltip
"left" | "right" | "auto" | "top" | "bottom"
"top"
offset
Allows you to specify finer positioning of the tooltip
number[]
"[0, 10]"
zIndex
Use this prop to increase z-index on message popper
number | "auto"
"auto"
delay
Delay tooltip visibility
boolean
false
display
Defines if the tooltip should be rendered, not influencing on the rendering of the content wrapped by it
boolean
true
children
The trigger element.
ReactElement
id
Native HTML attribute: Link . Internally, this component uses a random id. We use it to associate an input with a label element. As the random id might break snapshot tests it can be overridden by setting an explicit id.
string
disabledWrapper
A warapper for disabled Button
boolean
close
Allows you to close the tooltip
boolean
false
onTooltipToggle
The callback to inform the parent component with the tooltip visibility state
((isTooltipOpen: boolean) => void)
data-{foo}
Data attributes can be used by testing libraries to retrieve components or assert their existence
string
* - the prop is required.