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.
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.
- Raised surface
- Copy — Body 2
- Raised surface
- Copy — Body 2
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.
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).
There are no state considerations for this component.
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.
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
Mobile long press — Exit
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
Click — Entrance
Click / Hover — Exit
Page Scroll — Exit
If no click or touch event hides the tooltip, and the user scrolls, the tooltip is hidden right away.
Developer DocsVue Developer Docs
Component documentation coming soon!