Use guidance tooltips to give users a little extra help with a feature or a step they’re trying to complete.
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
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.
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.
Use qbal-coachMark-enter https://intuit.github.io/qb-animation-library/#animation-classes
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.
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.
Standard tooltip vs. guidance tooltip (This section is TBD)
- 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.
- Triggered on page-load
- To introduce a feature within a page
- To highlight the feature within a page