Tooltips allow users to get contextual help or information about specific components when hovering or focusing on them.
All tooltips have labels. These allow users to get contextual help or information about specific items when hovering over or focusing on them.
By default, tooltips are the neutral variant. These are the most common because most tooltips are used to simply disclose additional information, without conveying a semantic meaning. The neutral variant never has an icon.
Three of the four tooltips (informative, positive, and negative) can have icons to support the message. These icons are predefined and cannot be customized. Unless the tooltips are being used for the exact same icons, semantic tooltips should always show the icon. This is essential for users with color blindness to discern message tone.
By default, the maximum width of a tooltip is size-2000. This can be customized to better fit your context.
From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.
neutral / informative / positive / negative
yes / no
If the neutral variant, there’s never an icon.
When the label is too long for the available horizontal space, it wraps to form another line.
A tooltip fades in and out when showing and hiding, and slides a short distance from the source to indicate its origin. The direction of the slide (left, right, top, bottom) depends on the placement of the tooltip. The animation attributes (duration, easing, offset) are the same whether it’s showing or hiding.
Tooltips attached to help icons appear immediately. For conventional UI elements where a tooltip appearing immediately would be intrusive, delay appearance with a warmup period.
The warmup period is a global timer that requires the cursor to remain on a UI element for the allotted time before a tooltip will appear. Once the period is complete, tooltips appear instantly on any hovered UI elements until the cursor is in an area that does not trigger a tooltip for the duration of the cooldown period.
Icons are not always easy to identify on their own. Use tooltips to provide simple explanations.
Tooltips should be as concise as possible while remaining clear. Ideally, the copy should be one or two lines of text. If the copy is too long, look into using a different design.
Crucial informatiom should be visible on the screen at all times, not just when a tooltip is displayed. A tooltip should only be used to provide extra helpful information and context.
Tooltips appear only on hover or when receiving focus from the keyboard. Therefore, tooltips should not contain actions or links.
For RTL (right-to-left) languages, the layout of the tooltip is mirrored. The icon is placed on the right side of the text.
|Tab||Tabbing into an item that has a tooltip associated (e.g., an icon) shows the tooltip.|
|Esc||Hides the tooltip.|
|Aug 22, 2019||5.1.0|
|Apr 19, 2019||5.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.