Switch to Wilmington
DesignDevelop
Version 4.5.1
Overview

Tooltip

Tooltips are elevated labels that provide brief, supplementary information about the element they point to. They are keyboard-navigation friendly and triggered on click, tap or keyboard focus. Tooltips do not support rich text or complex operations.

Tooltips hide information by default, therefore they should be used sparingly. If the user needs to know the information within the tooltip to complete their task, place it within the main layout. Additionally, tooltip content should be unique and not repeat information that already exists on the page.

Usage

Title

I provide additional information that is nice to have but that you don't need to complete your task.
Tooltip
The default tooltip is an accessible element that is expressly user-dismissed with the available 'Close' function. A tooltip may optionally include a title for easier readability and to create hierarchy.

Design Environment

Offer consistent visual cues indicating a tooltip is present, either as standalone elements (e.g. Help Links) or as a specific treatment for inline elements (e.g. dotted underline on inline text). Tooltip positioning within the layout is programatically determined by the caret's placement in relation to the element it points to. This ensures that the tooltip stays in the context of the appropriate page item across breakpoints. In order to avoid a tooltip covering related content, they include a padding of 8 px between the tooltip caret and the element it points to.

The information within a tooltip will not scroll, so be careful not to overload your tooltip with content. If there is a need for additional context, consider using a modal instead.

Tooltips are elevated to the interaction level of the elevation structure and have a small shadow.

Microcopy

Tooltip content may be fragments or full sentences but should be as concise as possible. Fragments and full sentences should both use sentence case, but only full sentences should include end punctuation unless the fragment is a question. If including a title, follow the microcopy guidelines of the title component. The information in a tooltip should be as concise as possible and should not be necessary for the user to complete a task. Additionally, tooltips should be unique and not repeat information that is on the page.