Tooltip

Done

Tooltip is a raised content block with simple copy used to aid the user in getting more information about a UI element or piece of content in an experience.

Anatomy

The essential parts of a tooltip are the raised surface and copy contained within the surface. Every tooltip should be short, simple, and to the point; however, sometimes it’s just not possible to keep the copy to a few words. So for this reason, tooltips come in two variants: standard, and large.

Standard tooltip

Raised surface
Copy — Body 2

Large tooltips

Raised surface
Copy — Body 2

Usage

Tooltips are meant to support content and should never get in the way of critical tasks. They provide additional information upon hover, focus, or long press. Always try to keep tooltips as short and simple as possible. Tooltips provide additional surfaces to display information progressively so we can maintain a minimal interface.

When to use

Describing elements or features within the interface.

When not to use

Tooltips should not be used for:

Displaying rich information and imagery.
Error messaging or warnings (use Notifications instead)
Re-stating information already visible in the UI
Displaying interactive content

Tooltips & Triggers

The tooltip component is triggered by interacting with other components — in most cases the Quick Action Button.

Specs

Color

Element	Property	Value
Container	Background color	∆colorPlatformWhite
Copy	Text color	∆colorPlatform900

Elevation

Element	Property	Value
Surface	Shadow Y-offset	∆surfacePlatformRaisedShadowY
Surface	Shadow opacity	∆surfacePlatformRaisedShadowOpacity
Surface	Shadow spread	∆surfacePlatformRaisedShadowSpread
Surface	Shadow blur	∆surfacePlatformRaisedShadowBlurResting

Spacing

Min/max

Standard tooltips are sized to fit the content within — no min/max sizings are typically needed. Just keep in mind that standard tooltips should be short phrases, and if there’s a need to display more copy that could possibly wrap to two lines, use the large tooltip instead. Due to localization efforts (just a few dozen characters in English can easily become double or triple the amount in other languages) the standard tooltip has a max width of 440. Due to this max width, technically it would be possible for the standard tooltip to wrap to multiple lines, but every effort should be made to keep the copy very short and simple.

Large tooltips have a max width of 440, and can wrap an unlimited number of lines. Ideally tooltip copy should be short and concise, but sometimes it’s required to place a novel inside (financial and legal information sometimes contains wordy industry jargon).

States

There are no state considerations for this component.

Theming

Shape

Element	Property	Value
Container (standard)	Small component	∆shapeBranded
Container (large)	Large component	∆shapeBranded

Placement

Tooltips are meant to be used primarily for supplemental details and should appear immediately above the trigger. Ideally, tooltips should be positioned above and centered to the trigger, but if there’s not enough room to display the entire tooltip with this positioning, the tooltip can be either right or left aligned to the trigger. If there is not enough space above the trigger, the tooltip should be placed below the trigger.

Behavior

Mobile devices

Triggering tooltips on mobile devices is generally done by tapping once on an item. Tapping anywhere outside the tooltip will close it. Optionally the tooltip can be triggered only by long pressing. Once the long press is released, the tooltip is hidden. Note: The user can slide the finger on the screen to keep tooltips engaged. As soon as the user lifts the finger off the screen, the tooltips will automatically disappear.

Mobile long press — Entrance

Single press — Entrance

Interaction	Steps	Duration	Easing	Notes	Haptics
Entrance	1a. Scale in	∆motionTimeExtraFast	∆motionEasingStandard	Scale component from 96–100%	Light on trigger
	1b. Fade in	∆motionTimeExtraFast	∆motionTimeExtraFast	Fade opacity from 0–100%

Mobile long press — Exit

Desktop/widescreen devices

Triggering tooltips on widescreen devices is generally done by hovering over an item momentarily. Once the mouse over event is complete, the tooltip is hidden. When needed, a tooltip can be triggered by a single click and remain on screen until the user clicks anywhere else on the screen.

Hover — Entrance

Interaction	Steps	Duration	Easing	Notes
Entrance	1. Delay	∆motionTimeSlow
	2a. Scale in	∆motionTimeExtraFast	∆motionEasingStandard	Scale component from 96–100%
	2b. Fade in	∆motionTimeExtraFast	∆motionEasingStandard	Fade opacity from 0–100%

Click — Entrance

Interaction	Steps	Duration	Easing	Notes	Haptics
Entrance	1a. Scale in	∆motionTimeExtraFast	∆motionEasingStandard	Scale component from 96–100%
	1b. Fade in	∆motionTimeExtraFast	∆motionEasingStandard	Fade opacity from 0–100%

Click / Hover — Exit

Interaction	Steps	Duration	Easing	Notes	Haptics
Exit	1. Face out	∆motionTimeExtraFast	∆motionEasingStandard	Fade opacity from 100–0%

Page Scroll — Exit

If no click or touch event hides the tooltip, and the user scrolls, the tooltip is hidden right away.

Interaction	Steps	Duration	Easing	Notes	Haptics
Exit	1. Delay	∆motionTimeSlow
	2. Fade out	∆motionTimeExtraFast	∆motionEasingStandard	Fade opacity from 100–0%

Developer Docs

Vue Developer Docs

Component documentation coming soon!