How to design a good Tooltip in UI design
Credit: Hai Thắng (UI Design)
With UI/UX designer work in particular, we come across a lot of tooltips in digital products, or maybe their presence is obvious, so you might not even notice its presence, but if it weren’t, you’d be wondering.
If you are looking for inspiration to design a tooltip for your project or simply dig deeper into the tooltip and its applications, this article will share with you some of the most prominent tooltip examples.
What is tooltip
The term tooltip originally came from older Microsoft applications (Microsoft Word 95). These applications would have toolbars wherein, when moving the mouse over the Toolbar icons, displayed a short description of the function of the tool in the toolbar. More recently, these tooltips are used in various parts of an interface, not only on toolbars.
The tooltip, also known as infotip or hint, is a common Graphical User Interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element, such as a description of a button’s function, what an abbreviation stands for, or the exact absolute timestamp over a relative time (“… ago”).
Tooltip used in the browser, the stylus on a Samsung Galaxy Note, Apple pencil on Ipad, or every smartpen with the tablet. On mobile operating systems, a tooltip is displayed upon long-pressing, tapping, and holding an element. Some smartphones have alternative input methods such as a stylus, which can show tooltips when hovering above the screen.
Common tooltip use cases include interactive walkthroughs, secondary onboarding, and feature introduction.
You can view instructive tooltip examples from Medium, Slack, Wikipedia,…
For good UX when using a tooltip
Use when absolutely necessary
When the elements on your screen are not clear enough to explain to the user the specific function of that element, you should use a tooltip to convey meaning or usage to the user.
For obvious elements like a button where the text is “Add friend” and you use a tooltip that describes the button as “Click to add friend” then using that tooltip has no value to the user.
If your tooltip doesn’t provide value, users will ignore them and miss out on other important information. Remember you use the tooltip to increase user experience, not to increase engagement.
Use clear, concise descriptions
When writing the content of the tooltip you should remember that when the content is too short and unclear, or too long, it will be ignored. Try to write content that is concise enough to convey the meaning of the element to the user. For elements with somewhat complex functions, when you’re done writing, you should internally interview a few colleagues to check their attitude toward the content of the tooltip.
Do not interrupt your users
Be very careful to make sure that your tooltips don’t disrupt the user experience. Be careful with the tooltip type.
The tooltips pane doesn’t encroach on other important content
Some tooltips really take up most of the screen and cause users to miss out on important information or elements.
If you want to use tooltips to improve user experience, you should pay attention to the above factors to use tooltips properly. Otherwise, you will be counterproductive, making the user experience even worse.
8 types difference of tooltips in UI design
1. Information
One of the most common tooltips uses is the informational tooltip. It appears upon mouse hover or keyboard focus state and shows additional information related to a specific label, icon, or card that it’s linked to.
2. Contextual
Tooltips can also provide additional help when defining an item or term. It may be used on the label of a Ul element, or on a word embedded in a paragraph. These words are usually highlighted or underlined.
3. Navigational
To avoid overloading users with information during the initial onboarding tour, some apps use contextual tooltips to offer advice as users navigate through the app and discover its functions along the way.
4. Datapoints
Tooltips are often used to show additional information related to specific data points to give a quick and easy overview of the most important metrics. Usually combined with a link to open a new view and see more details.
5. Alerts
Alert tooltips are periodically used to offer hints that help
users gradually progress through the product to
understand the functionalities better.
6. Inline editor toolbar
Tooltips are very often used by text editors to offer a much quicker and more intuitive way to access editing tools.
7. Image/Avatar
To save screen estate apps use tooltips to hide specific details related to profile avatars like names, emails, statuses, and quick links that open new flows.
8. Onboarding
Tooltips are commonly used for app product tours. They help walk users through a product’s UI, show it’s functionalities and parts of the interface that are interactive and editable.
Summary
Having read this article, you should have a better idea of what you want your tooltips to look like for your brand, and what you can use them for.
When well-designed and used in the most relevant point of a product without interrupting users, tooltips can be a great way to increase your product adoption rate and provide a better user experience.
Hope this was useful for you. Thanks for reading through.
