Tooltip

Planned

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.

Tooltip

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

  1. Raised surface
  2. Copy — Body 2

Large tooltips

  1. Raised surface
  2. 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

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 needed. Just keep in mind that standard tooltips should be short phrases. If there’s a need to display more copy that could possibly wrap to two lines, use the large tooltip instead. 


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

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 long pressing an item. 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 Haptics
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!