Tooltips
A tooltip is a floating message shown when an
interface element is focused (either by hovering, tapping or clicking). It
will contain useful information for the user on what the component in
question does.
Use Cases
- Whenever an interface element (button, text, input, label, tag, or any other) has an specific behavior, requirement from the user or any other specific information to provide the user, in order to assist him with his task.
HTML
Do's & Dont's
A component that appears on demand
Unlike other components which goal is to be available all the time
on the screen, a tooltip appears and disappears on-demand by users.
On-screen time and focus for this component must be carefully considered in order to allow the user to read the content, but also not being disruptive with the tasks he is working into.
On-screen time and focus for this component must be carefully considered in order to allow the user to read the content, but also not being disruptive with the tasks he is working into.
A Tooltip is just informative and
descriptive
A Tooltip does not allows any kind of interaction or feedback from
the user. Its function is only informative and contextual and,
different from the Alerts/Notification, will not provide real-time
feedback on events.
For other cases, please refer to alternative and related components.
For other cases, please refer to alternative and related components.
Do not include vital information
As tooltips are shown only on-demand and temporarily, it is
important to avoid using this component to contain vital information
(just as password requirements, for example).
For vital or basic information that the user needs to know, it is advised to locate it where the user always can see it and, preferably, near to the relevant components.
For vital or basic information that the user needs to know, it is advised to locate it where the user always can see it and, preferably, near to the relevant components.
Alternative and Related components
