Tooltip

Tooltip is a component to display all sorts of tips. It's a wrapper over Popper component.

Tooltip's differences from Dropdown:

• It appears only while hovering over the trigger.
• It has an arrow that points to the trigger.
• It contains only hints and additional information.

Tooltip has themes: default, invert for using on a dark background and warning for validation messages. In both cases, the text color changes to --white and the background color changes to the corresponding one.

In 3.1.0 version, you can set your own theme and change background color to custom.

The basic tooltip has a maximum width – max-width: 250px. But you can set a different width if necessary.

The offset from the trigger to the tooltip is 4px.

The content area has default padding – 12px.

Note that it is better to use 14px for the title for the non-advertising messages.

Image has size 130px * 130px.

Arrow can be placed either in the middle of the component or next to any side. See live examples in the Placement section.

To make tooltip data more readable we recommend you the following margins between the labels and values. You also can find the detailed recommendations for tooltip margins in Data visualization and Summary.

• Tooltip is built with the Popper.js library. So you can change the placement of the component according to Popper API.

• Tooltip shouldn't change its position while scrolling a page (for example, if it appeared upwards, when scrolling it shouldn't appear at the edge of the browser and moved down). The default tooltip placement – top.

For the tooltip trigger you can use a formatted text, table header, or interactive components such as Icon, Link, Button, etc.

Default values for tooltip appearance and hiding:

• appearance: 100ms;
• hiding: 50ms.

If tooltip has controls inside, the time for hiding should be increased to 100ms.

Tooltip usually contain unformatted text.

In some cases (e.g., for advertising purposes) you can format text and add other components to the tooltip:

• Button, Link, etc.;
• image;
• different background color.

Remember, that tooltip should contain only hints and tips.

Main recommendations:

• Use the tooltip to show hints and additional information. It can be a text, a formatted text with lists, links, buttons and small images.
• Make sure that the tooltip does not overlap the information important for the user.

For complex content and forms, use Dropdown-menu.

If the tooltip trigger tells about the new feature, the tooltip title should not duplicate the trigger text. The title may not be used if the trigger text already explains the tooltip content.

When the trigger is not obvious enough, add a title to the tooltip. It is also necessary to add a title when the trigger does not sufficiently explain the topic of the tooltip. For example, you can describe additional conditions in the header, or expand the idea behind the trigger.

Divide long text into paragraphs.

Do not overload the tooltip with information. The large amount of content is inconvenient to view in the tooltip. If there is too much content and you cannot remove anything, think about whether you need a separate paragraph on the page or widget instead of a tooltip.

A tooltip should not prevent you from pointing the cursor at a nearby trigger.