It is completed in Aug 2021. I am responsible for documenting the tooltip behavior in Interact products.
Background
There were tooltip components in our Figma atoms library, but no guidance.
Tooltips are widely used in the graphs of Interact web apps because of the monitoring-related and reports-related features. It is also worth giving some guidance on how the tooltips behave when they are being used on touch hybrid devices (Interact mobile apps). Depending on the use cases, they could remain to be tooltips, or change to a dialog, etc. Guidance would keep the tooltip behavior consistent across Interact products.
Desk research
The research was focused on the tooltip-related articles and use cases in Interact apps. Since Interact apps are across platforms and tooltips are sensitive to the platforms, general guidance was given from this perspective.
Summary
All guidelines of the components in the Interact library follow the same structure.
- Types: tooltip types
- Anatomy: key elements explanation in different types of tooltips
- Usage: how the tooltips are used in Interact products
- Behavior: how the tooltips behave in details
Below is the spec.
Tooltips
A tooltip is an informational message often displayed as a text box that appears when a user interacts with an element in the graphical user interface.
Tooltips are usually triggered in one of two ways: through a mouse hover or by clicking/tapping on an interface element.
Tooltips can be linked to any actionable element (icons, text links, buttons, etc.) on a page. They provide descriptions, explanations, or possible actions for their paired element. Thus, tooltips are highly contextual and specific.
One important aspect of tooltips is that they are user-triggered.
Types
There are three types of tooltips, supportive tooltip, informative tooltip, and actionable tooltip.
Supportive tooltip
Supportive tooltip is used to provide additional information to the users about a UI element or the context that element is in.
They contain supplementary content that is not required for the completion of the task. Users should be able to finish their tasks without being dependent on the content of the supportive tooltip.
Informative tooltip (Popup)
Informative tooltip is used to inform the users of the characteristics or status of a UI element.
It should be used in a case that user consciously looks for extra information. Therefore, it attaches to an interactive (by click or hover) UI element such as bars in a chart, info icon, etc, so that user knows where the information that he/she is looking for might be stored. In the case of the informative tooltip, the content might actually be required for completing a certain task.
Actionable tooltip (Popup)
Actionable tooltip is similar to informative tooltip, in terms of activation behavior.
In addition to status and characteristics, this tooltip can contain actionable components such as links, CTA buttons, etc. But it only contains task with one simple step. The information is going to be displayed on new pages or multistep flows in dialogs/popups.
Anatomy
Supportive tooltip
- Label: A concise explanation of the UI element with a couple of words
- Bounding Box: Container of the label, always enfolding the label
Informative tooltip
- Title (optional): Provide a title when the tooltip does not belong to a clear context.
- Content: Informative elements, depending on the need, could be text, icons or images.
- Bounding Box: Container of all information, always enfolding all information
- Tip: Visual indicator indicating the relationship between the UI element and the tooltip
Actionable tooltip
- Title (optional): Short and concise, summary of the tooltip content.
- Content: Descriptive and extensive information on the UI element.
- Interactive Element: An interactive element, leading to a simple task.
- Tip: Visual indicator indicating the relationship between the UI element and the tooltip
- Interactive component: a Clearly-interactive UI element
- Close button (optional): Closing the tooltip
- Bounding Box: Container of all information, always enfolding all information
Usage
Tooltips in general are used when it is necessary to provide additional, useful, unique and contextual information.
Do NOT rely on tooltips for important information like immediate errors, must known information since tooltips hide information by default. In those cases, it is better to show the information in a prominent place on the UI directly.
Don’t – Deliver information that is necessary for task completion with a tooltip.
Platform
Tooltips are mainly reserved for large and medium-sized viewports.
- Supportive tooltip only appears on desktops.
- It is possible to have informative tooltip and actionable tooltip on touch devices. But it’s recommended to use a bottom sheet or dialog to carry the content.
Supportive tooltip
Supportive tooltip is activated by hover. So it only appears on desktops.
It is used to provide additional information that is not required to finish a task. The main purpose of this type of tooltip is the clarification of the interface in case of possible vagueness. It is usually the explanations on the UI element, short and concise, text only, no hierarchies.
Provide short and concise explanations in a tooltip. In this case, instead of saying: “Refresh, use F5 for shortcut”, “Refresh (F5)” is enough.
Caution – Wrap the text when the label is too long and also make sure all information is necessary, short and concise.
Don’t – Place complicated content such as images in a supportive tooltip.
Don’t – Repeat the information visible on the screen with a supportive tooltip.
Informative tooltip
Informative tooltip is used to inform the user on the characteristics or the status of a UI element. The main use of this tooltip is to split the information that needs to be delivered to the user into steps in order to prevent a chaotic interface. It can contain rich content with titles, informative text, images, icons, hierarchies with sophisticated layout.
But no actionable components are on informative tooltips. Because we suppose users are usually in an exploration mindset, actively looking for information where informative tooltips are provided. During the exploration process, they play a passive role of receiving the information but not providing any.
Actionable tooltip
The actionable tooltip is used to reveal the possible actions that can be taken from a UI element.
- Use actionable tooltip to split the actions that can be taken into steps in order to prevent a chaotic interface.
- Use actionable tooltip when you want to give user a summary of extended information and an option to switch context if they want to dive in deeper.
- Actionable tooltip is used in the cases where users play an active role. They receive information as well as interactive with it.
Therefore, it contains not only text, image, icons, but also at least one actionable UI element such as link, button, etc.
Behavior
Common behaviors of the tooltips are as below.
- It always fits in the viewport without trimming.
- It appears once at a time.
Don’t – Have more than one tooltip open at the same time.
- Tooltip are never scrollable.
Don’t – Scroll content in tooltips.
Supportive tooltip (desktop only)
Supportive tooltip is activated by hover.
Add a delay of around 400ms to help users to process the content better.
When user moves the cursor out of the UI element, the tooltip disappears. The supportive tooltip should be positioned in a way that it is close to the UI element, but does NOT block any important content on the screen.
The UI element does NOT need to hint the existence of the supportive tooltip since it is additional information, not necessary for task completion.
Because this type of tooltip is triggered by mouse-hover, it can not be used in touch interfaces.
Informative tooltip
Informative tooltip could be activated by hovering or clicking/tapping on the relevant UI element. There should be a clear visual indication on the UI element that it is interactive. The information informative tooltips contain is hidden by default but it can be of high importance to the user.
Actionable tooltip
Actionable tooltip could only be activated by click and deactivated by clicking the close button or somewhere outside of the tooltip since there will be at least one interactive UI element on it such as a link or a button, etc.
Wenlan’s portfolio site 