Tooltip

Tooltips are small text-based components that when triggered by a reference element provide context to the user.

Overview

Tooltips float over other elements in the z-axis and provide text to quickly assist the user to understand context, actions, and other elements. A Tooltip can be a helpful UX device to give the user clarity before committing to an action. Avoid relying heavily on Tooltips, as you should prefer headers and labels that accurately describe a workflow. Tooltip positioning can be automatic or manually set to avoid clipping in the interface.

It is recommended to place Tooltips shallowly in the DOM.

For a more robust floating messaging, consider Popover.

For more advanced floating workflows, refer to Modal.

Usage

  • General helper text
  • Succinct action hints

Sample

Best practices

Below are important guidelines on using the Tooltip component.

Correct Tooltip directional
Do use directional props based on the placement of the item generating the Tooltip.
Avoid Tooltip directional
Avoid using directional props that could make the Tooltip fall off of the interface.

Accessibility

It is strongly recommended to house the component's content in an element, such as a span or p, providing context to assistive technologies when accessed.

Keyboard navigation

KeyFunction
TabMoves focus to access the component's contents from its reference element. If the current focus is the reference element, focus will leave the element.
Tab and ShiftMoves focus to access the component's contents from its reference element. If the current focus is the reference element, focus will leave the element.

Writing and copy

Correct Tooltip content length
Do use Tooltips as brief text helpers. Prefer brevity.
Avoid Tooltip content length
Avoid using Tooltips with more than one sentence or 75 characters. Prefer Popover or Modal for more content.
Correct Tooltip helpful
Do use actionable verbiage when applicable.
Avoid Tooltip not helpful
Avoid being vague or baiting with Tooltips.
Correct Tooltip punctuation
Do put helpful statements in Tooltips.
Avoid Tooltip punctuation
Avoid having questions in Tooltips.
Correct Tooltip add
Do use Tooltips to properly describe a contextual problem.
Avoid Tooltip add
Avoid redundancy with Tooltips.
  • Tooltip text should be succinct and straight to the point
  • Periods are not necessary for ending Tooltip text
  • Avoid contractions such as "you're", "aren't", "don't", and "can't" to avoid confusion and to assist with internationalization
  • For longer content, please consider Popover
  • Recommended character maximum: 75

API reference

Properties

Slots

Styles

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.