Tooltip
Overview
Tooltips give users extra information about an element on the UI. Tooltips display a brief description about the element’s purpose and function when users hover or focus on it.
Other names: Popover, Callout
Behaviors
Show/hide
Tooltips appear when hovering over, or focusing on the element they're related to. When the user moves away from the element, the tooltip disappears.
When using keyboard navigation, refer to the Accessibility section for guidance.
Animation
Tooltips appear with an animation lasting 250ms, as mentioned in the motion guidelines. Tooltips disappear at the speed set by Kendo.
Variations
Default
Default tooltips appear near an element being hovered over or focused on. Default tooltips contain only text.
Chart tooltips
Chart tooltips only appear when a chart element is hovered over.
Chart tooltips contain any necessary information for understanding the chart element being referenced. This can include color blocks or other details like percentages. These tooltips are intended to be concise.
Usage guidelines
Do use tooltips:
- To give users background information about the action they’re performing
- For “nice-to-know” information that can help new users but experienced users can bypass
Don't use tooltips:
- To hide critical instructions that are necessary to a user’s success
- As a substitute for an intuitive UI design with clear, purposeful labels
Content guidelines
The content in a tooltip should be supplemental—not required—information. Tooltips also shouldn’t just repeat what is already visible on the UI, like an element’s label. Think of tooltips as giving the user extra context about something. It could be a definition, or the “why” behind what a user is doing.
Tooltips should be concise, no more than a sentence or two. Tooltips should be written in sentence case.
Examples of informational content in a tooltip:
- What’s this and what does it do?
- Where can I find this?
- Why do I have to do this, or why should I do this?
Try this
- You can find this information in your Password Safe Cloud settings.
- We’re asking for this so we can better understand how you use our products.
Not this
- To finish setting up this connector, you need to enter this information.
- In order to continue with the survey, we need this information.
Accessibility
Tooltips should work on both hover and focus. Hover states often don’t work well on mobile devices and screen readers, so tooltips that also activate on focus cover a broader range of users.
When using keyboard navigation, the tooltip will appear on focus and remain visible until the focus is moved to another element.
Placement
When possible, tooltips appear centered above the element they're tied to. Ideally, tooltips shouldn’t cover clickable or interactive elements. They also shouldn't be cut off by the end of the browser window in any direction. In these situations, move the tooltip to the nearest place that doesn't cover important elements or get cut short.
Tooltip or help text
Tooltips:
- For shorter informational content, like quick definitions and short explanations
- Displayed on either focus or hover of an element
- Content is text only with little to no formatting
Help text:
- For longer informational content, like detailed instructions
- Displayed by selecting an icon, often a question mark
- Can contain different formats of content, including images
Related
Referenced in this section:
Updated 8 days ago