Tooltip
A container to show brief explanation of a term.
Page sections
Types
Default
With headline
With labeled categories
Usage
Displaying content that explains a term that the user needs for more clarity in the context of a page.
Behavior
Tooltips always appear on-click /-tap.
Always close by refreshing the page, clicking the close icon/CTA, hitting escape, or clicking outside the tooltip.
On tablet/mobile, always slide in from the bottom and vertically fit the container to the content.
Visual style
Default
With headline
With labeled categories
States
Spinner is used for a tooltip’s loading state.
Tooltip error state always includes an error icon.
Content strategy
- Typically only requires body text, but headlines are acceptable when necessary
- Align on character counts, particularly with attention to mobile displays
- Avoid character counts over 220 English characters
Accessibility
Characteristics
- Popovers are made up of two parts
- Trigger =
Link
/Button
/ Image - Popover container
Keyboard/focus expectations
- Trigger element receives keyboard focus.
- Pressing Enter / Spacebar (varies by screen reader) to activate trigger (do not use a hover event).
- Users can move on from trigger without triggering the popover.
- Focus must be trapped within popover container.
- Focus is placed on the popover’s close button. (In the future if we add another action in the popover we will need to revisit this rule.)
- Pressing ESC or activating the close button dismisses the popover.
- Focus must return to the popovers trigger element.
Screen reader expectations
- Screen Reader must announce presence of the popover. (how it announces will be determined as component is being made.)
- Close button must be identified to user as a close button.
- User must be notified the popover has been closed / dismissed (done by placing focus back on trigger).