Tootlip

24.7

Floating labels to describe or add additional information.

Tootlip

24.7

Floating labels to describe or add additional information.

Tootlip

24.7

Floating labels to describe or add additional information.

Overview

Example fo a tooltip

Tooltips are floating labels to describe or add additional information when users hover over, focus on or tap an interactive element.

Usage

The tooltip is used to display additional information upon hover or focus.

  • Provide additional information when space is tight.

  • When more information is useful in helping a user make decisions.

  • When an element needs more context or explanation.

  • Provide help while filling out a form.

  • Show the full version of the truncated text.


Caret

  • From 25.8 and onwards, by default, tooltip carets should be hidden

  • You can still choose to show the caret in special cases where there is not visual indicator on hover for the trigger element

Alignment

The container of the tooltip may be aligned to the left, center, or right to keep the container from bleeding off the page or covering important information.

Different aligments for tooltips

Leave 10px between the hovered component and the tooltip caret / body.


Placement

Tooltips can instead use specific directions and may be positioned right, left, bottom, or top of the trigger item.

4 different placement tooltips.


Transition Delay

The component has an option to support a 300ms transition delay. We added this for the Truncate component to avoid horizontal triggers in truncation-heavy UIs like tables.

We're currently assessing which other tooltips should use the transition delay.

Variants

Recommended: Light Tooltip / Light Tooltip + Title

Having a tooltip theme that matches the UI is more extensible. This approach enables us to incorporate theming into our products with more ease.

Two variants of tooltips, one with a title the other one without

Dark Tooltip / Dark Tooltip + Title [⚠︎ Deprecated]

Having an inverse color pattern can have an impact on extensibility. It contradicts theming logic, and it's discouraged, unless used with a Nav element.

A dark color variant of tooltips

Content Guidelines

We use tooltips to provide clarity on complex actions/terms, additional information, and educational explanations to further guide the user about any action or aspect of the user flow. 

Note: We do not use tooltips to hide or conceal any type of information that might be critical for the user. 

We follow these basic rules while writing content for tooltips:

  • Voice: Be insightful and clear; do not use heavy jargon.

  • Tone: Be helpful while giving information or instruction to the user.

  • Language: US English

  • Voice Structure: Active voice

  • Casing: Both title and description in sentence case, and keep proper nouns as is.

  • Punctuation: Use no period for short sentences or sentence fragments. Use full punctuation only when the message is a complete sentence. Do not use exclamation (!) and ellipsis (…).

  • Words and phrases to avoid: Please, successfully, oops, sorry, uh-oh, something went wrong, you shall, you can, did you know?

Structure of an effective tooltip message

We have 2 variants of the tooltip- normal and with a title.

The normal variant is used to:

  • Explain why an action is disabled

  • Provide additional information about a field or setting

  • Guide the user to take the required actions on the page

  • Clarify behavior or conditions without interrupting workflow

Example

Scenario: A button is disabled for the user
Approach: Tell the user what they can do to enable it
Message: Configure at least one VLAN to enable network segmentation

The title variant is used for:

  • Onboarding flows

  • Product walkthroughs

  • Feature introductions

  • Scenarios where users need both a label and a supporting explanation

Example

Scenario: When a user is going through a new product feature, say, targeted inventory
Approach: Use the title to say what the tooltip is about and expand on it in the description

Heading: Choose inventory type
Description: Run 'Full Inventory' for a complete check. Use 'Targeted Inventory' to scan specific parts of the cluster faster.

Accessibility

Tooltip should not obscure critical elements of main content.

Help make this page more useful.

Help make this page more useful.

Help make this page more useful.