Tooltip

Brief, additional information or context that appears when the user hovers over or focuses on a particular element. Tooltips help provide explanations, hints, or tips without cluttering up the interface.

Get Tetrisly for Figma

Install Tetrisly for React

Key Features

• Manipulate position

  Thanks to the available options for manipulating the positioning of the Tooltip and its arrowhead, there is no problem adapting it to a specific place on the layout.

Variants

Arrowhead Position

Arrowhead allows for a more precise indication of what the information refers to. Thanks to the option of selecting the arrowhead arrangement, it is possible to adapt the tooltip precisely to the specific component on the interface.

Tooltip Position

With four different options for Tooltip positioning, you can tailor the Tooltip to your project and make it fit best.

Property	Values	Default value
Arrowhead Position	Start, Middle, End	Middle
Tooltip Position	Top, Bottom, Left, Right	Top

Behaviors

Offset

The offset represents the gap between the tip's end and the target. While the default value is 4px, this should be modified with the specific case of the target.

Container padding

To ensure that the tooltip remains within specified limits (for instance, within a browser window), a container and a respective container padding value can be set. The standard value for this padding is 16px.

Text overflow

When the text is too long for the available horizontal space, it wraps to form another line.

Anatomy

1. 1. Before Icon
   2. Label
   3. After Icon

Best Practices

For additional info

Do not use Tooltip to convey critical information that is necessary to complete the task. It is better to use Helper text for this purpose. Use Tooltip for less important, supplementary information or clarification.

Do

Don't

For Icon Button

Use Tooltips with the Icon only Buttons and Tabs to explain its function. In this case, use a few words to describe the purpose or meaning of the icon.

Do

Without actions

Do not include interactive elements such as actions or links in the Tooltip. This is not an inclusive practice, as tooltips do not have a focus state.

Do

Don't

For shortcuts

It is good practice to use a Tooltip for a Button, the function of which can be called up using a keyboard shortcut, to inform the user of the possibility of using the shortcut and how to use it. 

Do

Content Guidelines

Scannable text

It is important that the tooltip text is clear, concise, and scannable. For shorter Tooltips (e.g. with the Icon Button), use one or two words. For Tooltips with longer text, aim to condense the information into one or two sentences. Make sure to use full sentences with proper punctuation.

Do

Don't