Use guidance tooltips to give users a little extra help with a feature or a step they’re trying to complete.

Usage

Show users these tooltips to give them additional information and guidance:

  • To point out a new feature
  • To guide the user through a new experience, such as a setup flow or some part of the product they haven’t used before
  • To help explain why the system needs to collect their data
  • To help the user complete a task

 

Appearance and behavior

One standard size 400 px and will scale down based on browser size. 16 px left and right padding around the tooltip on mobile.

 

Guidance tooltips appear in these three cases:

  • When the user first encounters or starts to use a page or feature
  • When we need to introduce a new feature or functionality
  • When the user selects a control that shows the tooltip, such as the show-tips toggle

When a tooltip shows up, the user can still interact with the rest of the page.

If the user doesn’t dismiss the tooltip and goes to other pages and then returns, the tooltip will still be there. It will remain until the user dismisses it.

In cases in which there’s no control to turn on the tooltips, users can select an “x” to dismiss the tooltip.

Component breakdown

 

Desktop behavior

The guidance tooltip points to (or guides users to) a specific element on the page. If it has multiple steps, use the guided tour tooltip. For single-step help, don’t use any step-indicator or pagination.

 

Mobile responsive behavior

The guidance tooltip width responds to the browser width and is anchored to the item that it’s pointing to during scroll. A 16 px margin appears on the left and right.

Content guidelines for guidance tooltips

 

  • Keep copy concise (no more than 3 lines per tooltip).
  • If the tooltip includes a title, set it in sentence case. Titles can wrap as needed.
  • Limit the number of guidance tooltips per screen. Too many of these links clutters the experience and makes the product seem harder than it is. For desktop screens, the maximum number of tips is 3. For mobile screens, the maximum number is 1.
  • When introducing new functionality, lead with verbs. Example: Use this dropdown menu to select a payment method.
  • Accessibility note: Be sure the experience works for users navigating the site with screen readers. For content design, that means avoiding directional language, like “at the top of the screen.”
  • Estimated character count for header: about 60 characters; for body text: about 130 characters.

Accessibility

When the guidance tooltip appears on the page, make sure the focus is on the tooltip. Otherwise, screen reader users would not be able to access the information here.

 

Focus and tabbing order

First focus on the guidance tooltip itself when shown is visually invisible. 

 

Focus state

 

Screen reader

 

Don’t

Do not change the line color

 

Do not use imagery on the tooltip

 

Do not use overlay behind the tooltip

 

Do not use blue color for link text. Use white and underline.

Avoid 2 line heading and 3 line body. Keep it short.

Standard tooltip vs. guidance tooltip (This section is TBD)

Standard tooltip

  • Triggered when use engaged with the relevant item )
  • To further clarify a label (this is actually an info link)
  • To further clarify the input requirements. Ex. character count, password criteria etc.

 

Guidance tooltip

  • Triggered on page-load
  • To introduce a feature within a page
  • To highlight the feature within a page

  • Was this Helpful?
  •