Tooltip Design Component from Outline: Figma Wireframe Kit

Shipfaster: UI Components

Outline Wireframe: UI Components

Tooltip

Overview

Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

Tooltips add a level of accessibility and smoothness to the user experience of your product. The information included should be contextual, helpful, and nonessential while providing the ability to convey more information to the user.

When to use

To provide additional explanations for content that would otherwise clutter the UI if permanently displayed.
To add context to a given screen.
When you want to describe icon only buttons.

‍

Anatomy

Tooltip label: Contains the context of the tooltip best described in short.
Description: Shows the complete additional information.
Action: Optionally adds a relevant action to the tooltip.

‍

Best Practices

Tooltips must be accessible via hover, focus or click.
Be sure to keep the language in your tooltips clear, to the point, and as short as possible.
Arrows are beneficial to clearly identify to which element the tooltip is associated. When there are several nearby elements, these arrows help avoid confusion.
Most icons have some level of ambiguity, which is why we recommend text labels for all icons.
Position tooltips so they don’t block related content and should be closer to the content it indicates.
Never have more than one active tooltip on the screen at once.

‍