Skip to main content

Tooltip

A tooltip is supplemental content associated with a specific UI component, and offered within a small overlay that only appears when a user hovers a mouse pointer over the corresponding UI component.

Example

Tooltip on a default theme

Best practices

A tooltip is a short description that is linked to another component or object. Tooltips help users understand unfamiliar objects that aren’t described directly in the UI. They display automatically when the user presses and holds or hovers the mouse pointer over a component. The tooltip disappears when the user moves the finger, the mouse pointer, or a pen pointer. Use a tooltip to reveal more info about a component before asking the user to perform an action. You can also use a tooltip to show the item under the finger during touchdown, so that users know where they are touching. (You should try to find other ways to disambiguate first, such as use a larger component, more spacing, or styling the component’s active/hover state.)

When should I use it? To decide, consider these questions:

  • Is the info displayed based on pointer hover? If not, use another component. Display tips only as the result of user interaction—never display them on their own.
  • Does a component have a text label? If not, use a tooltip to provide the label. It is a good programming practice to label most components and for these you don’t need tooltips. Toolbar components and command buttons with graphic labels need tooltips.
  • Does an object benefit from a more detailed description or further info? If so, use a tooltip. But the text must be supplemental—that is, not essential to the primary tasks. If it is essential, put it directly in the UI so that users don’t have to discover or hunt for it.
  • Is the supplemental info an error, warning, or status? If so, use another UI element, such as a flyout.
  • Do users need to interact with the tip? If so, use another component. Users can’t interact with tips because moving the mouse makes them disappear.
  • Do users need to print the supplemental info? If so, use another component.
  • Will users find the tips annoying or distracting? If so, consider using another solution—including doing nothing at all. If you do use tips where they might be distracting, allow users to turn them off.

Do

  • Use tooltips sparingly (or not at all). Tooltips are, to some degree, an interruption. A tooltip can be as distracting as a pop-up, so don’t use them unless they add significant value.
  • Keep the tooltip text concise. Tooltips are perfect for short sentences and sentence fragments. Large blocks of text are difficult to read and overwhelming.
  • Create helpful, supplemental tooltip text. Tooltip text must be informative. Don’t make it obvious or just repeat what is already on the screen. Because tooltip text isn’t always visible, it should be supplemental info that users don’t have to read. Communicate important info using self-explanatory component labels or in-place supplemental text.
  • Use images when appropriate. Sometimes it’s better to use an image in a tooltip. For example, when the user touches a hyperlink, you can use a tooltip to show a preview of the linked page.

Don’t

  • Don’t use a tooltip to display text already visible in the UI. For example, don’t put a tooltip on a button that shows the same text of the button unless touching the button blocks its text.
  • Don’t put interactive components inside the tooltip.
  • Don’t put images that look like they are interactive inside the tooltip.

Also known as

Hint
Infotip
Prompt

Related

Flyout

Accessibility

Tooltip accessibility is achieved by pairing itself with another element or component on the page.

  • The component that this Tooltip is applied to should include an aria-describedby attribute to associate itself with the tooltip through the use of an id attribute.
  • The Tooltip itself is hidden by the aria-hidden attribute on screen readers to avoid duplicate content. In addition, it receives an role="tooltip".

Development

  • Schema definition: The tooltip schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Short Tooltip

<!-- Begin tooltip input trigger -->
<label class="c-label">Label</label>
<input id="shortTooltipInput" class="c-text-field" type="text" aria-describedby="shortTooltip" data-toggle="tooltip">
<!-- End tooltip input trigger -->
<span id="shortTooltip" class="c-tooltip" role="tooltip" aria-hidden="true">Sentence lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>

Long Tooltip

<!-- Begin tooltip input trigger -->
<label class="c-label">Label</label>
<input id="longTooltipInput" class="c-text-field" type="text" aria-describedby="longTooltip" data-toggle="tooltip">
<!-- End tooltip input trigger -->
<span id="longTooltip" class="c-tooltip" role="tooltip" aria-hidden="true">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante. Integer mattis a ligula quis ullamcorper. Nam placerat quam sed nulla tristique mattis.</span>

Long Tooltip with action-trigger

Action trigger
<!-- Begin tooltip action trigger trigger -->
<a class="c-action-trigger c-glyph glyph-edit" href="#" aria-describedby="actionTriggerTooltip" data-toggle="tooltip">Action trigger</a>
<!-- End tooltip input trigger -->
<span id="actionTriggerTooltip" class="c-tooltip" role="tooltip" aria-hidden="true">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante. Integer mattis a ligula quis ullamcorper. Nam placerat quam sed nulla tristique mattis.</span>

Long Tooltip with link

Hyperlink
<!-- Begin tooltip hyperlink trigger -->
<a href="#" class="c-hyperlink" aria-describedby="linkTooltip" data-toggle="tooltip">Hyperlink</a>
<!-- End tooltip input trigger -->
<span id="linkTooltip" class="c-tooltip" role="tooltip" aria-hidden="true">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante. Integer mattis a ligula quis ullamcorper. Nam placerat quam sed nulla tristique mattis.</span>