Collab space: Tooltip

Patterns In progress patterns
1

This is an open space for collaborating on a tooltip pattern. To join in the conversation please add a comment below.

Your feedback is greatly appreciated and will help identify any areas of improvement. Let us know what you like about it, what you would change or any other suggestions you may have.

Overview

A tooltip is a brief, informative message that appears when a user interacts with an element.

When to use tooltips

Use tooltips on inline text elements that appear in the main content of the page to:

  • Provide more context or brief explanations for technical or industry-specific terms
  • Describe acronyms or abbreviations

Tooltips should provide concise additional information for inline elements in the main content area of the page only.

Do not:

  • Use to display vital information
  • Use on non-text elements such as icons, images, buttons or form fields

Types of tooltips

  • Default - Text only content, displayed on hover
  • Toggle-Tip - When links are included in the content, displayed on click.

types

Positioning

By default the tooltip content is set to display above the trigger on larger screens.

For smaller screens the placement of the tooltip content is relative to the position of the inline element (the tooltip trigger) and the viewport.

positioning
positioning1802×1042 145 KB

Tooltip trigger styling

The tooltip trigger has a dotted underline and is an inline text element which is used to activate the tooltip content - either on hover or on click (depending on the type being used, see ‘Types of tooltips’ above).

Cursor styling on hover

  • ‘Help info’ cursor for text only content
  • ‘Pointer’ cursor(same as the one used for regular links), when links are included in the content.

cursor-styling

Prototype

Tooltip - Small screen
Toggle-Tip - Small screen

2

Looks great @andrei.vidaicu !

  • With the interactions, for the Toggle-tip, will a user have to click the close icon to close it or can they simply click outside of the tool-tip?
  • On smaller screens (mobile), are default tool-tips and toggle-tips essentially the same?
    *What colour will the background be if the tool-tip appeared on a dark background such as ‘brand dark’?
2 Likes
3

It’s great to see work begins on this pattern. Ty!

1 Like
4

Thanks @garryctlau!

To dismiss using a mouse:

  • Clicking the “Close” icon or clicking anywhere outside of it.

To dismiss using a keyboard:

  • The “Esc” key or the “Tab” key to navigate to the “Close” icon, and then press the “Enter” key.

In terms of styling, they use less padding then on larger screens. Interaction is the same for both default tooltips and toggle-tips on touch devices/smaller screens.

Please see the link below for what it will look like when on a dark background:
https://www.figma.com/proto/YNN1zouHecZ3UFdJEZ5ggY/DS-Components?node-id=3894-41117&scaling=min-zoom&page-id=1076%3A16984&starting-point-node-id=3856%3A41082

5

Thanks @tnafoo! We’re really excited to get some visibility around this. Stay tuned for more.

6

This is cool @andrei.vidaicu Was it released? I’m working on a project for Revenue that requires a tooltip and it would be awesome if I could use this. Even if just as a mock up in design.