Introduction
A tooltip is a floating text label that provides explanatory information about an interface element or feature when a user hovers over, long-presses or focuses on them. It is displayed without any interactive actions and serves the purpose of offering additional context or clarification.
Usage
Keep it short! Tooltips should prioritise conciseness and clarity. It is recommended to keep the text within tooltips limited to 1 or 2 short sentences. By doing so, the tooltips can effectively convey information or guidance in a succinct manner. Don't use tooltips to communicate crucial information.
Use tooltips to display additional and non-crucial information to the user, such as explaining an icon.
Always display criticial information in the UI itself and don't hide it in a tooltip where it might not be seen.
Keep the content in the tooltips short and easy to understand.
Don't write long and hard to understand paragraphs in tooltips. If there is a lot of information, opt for other components instead.
Display the tooltip so it doesn't overlap any other elements..
Whenever there's crucial information to a task, don't hide it in a tooltip. Opt to display it as a hint, or as a text.
Also known as
Helper Bubble, Hover Info Text