The guidance tooltip provides contextual help throughout the application.

Usage

The guidance tooltip can be used:

  • To point out a new feature
  • To guide the user through a new experience
  • To help explain why data is being collected
  • To help with task completion

Appearance and behavior

The guidance tooltip can be triggered in three ways:

  • On page load
  • When specific conditions are met such as first time visits or when releasing new features
  • On click or tap event (see info link)

Responsive behavior

Desktop

The guidance tooltip points to (or guides users to) a specific element on the page. It may have multiple steps (see guided tour). For single-step help, there should be no step-indicator or pagination.

 

Mobile

The guidance container slides in quickly from the top of the screen and is dismissible. It remains in place during scroll.

Fixed

  • Close “x”, visible at all times.

Flexible

  • Variable width and height with min 236px (width) x 108px (height) and max values 486px (width) x 172px (height). Note: on mobile, guidance always spans full width of the screen with a max height of 156px.
  • Step indicator; recommended unless number of steps changes (is conditional).
  • Can contain illustration/animation. Used to help communicate feature/functionality.
  • Can contain help/text link.
  • Was this Helpful?
  •