Tooltip: Giving more context to your users!
This week, I learned how to prevent Tooltips from going off-screen.
In the field of web development, we strive to make it easy for users to interact with our sites. This ease usually comes with lots of helpful pieces of information that accompany all call-to-action elements in our user interfaces.
Once a user interacts with the interface for awhile, they get to know where important elements live and how to take advantage of the value these elements provide.
Therefore, this helpful information becomes irrelevant or annoying for this regular user. So site builders usually hide them.
There are many known solutions to hiding this information, while making sure that any new user, will be able to find them.
Some of these solutions are: More info links, Descriptive input error messages, Popup windows, Collapsible panels …
In this post, we will explore a solution that involve Tooltips.
A tooltip is a hidden user interface element that gets revealed upon user request(hover or click), in order to provide more information about another element of interest.
For more, you can check the Wiki definition.
- Preventing Tooltip from closing when user move mouse over it from the call to action element.
- Position Tooltip relative to the viewport for off-screen cases.
- Checking for Off screen positioning
You can find complete working code (in Angular) here
Now that we know how useful tooltips are, let us look at challenges that arise when implementing them:
- Tooltips can go off screen when the call to action element is close to the left or the right corner of the page. Addressed in the above implementation.
- Tooltips can interfere with main task of the call to action element on touch devices. Still looking for a proper solution, comment if you have one!
The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a…
This email app's tooltips have been customized using Material Theming. Areas of customization include color…
How to Display Tooltips on Mobile Forms
What interface element should you use to provide the user with helpful information about a form field? If you were…