A tooltip is a brief, informative message that appears when a user interacts
with an element.
Position your tooltip using the
sgds-tooltip is-tooltip-*position* class.
When you should use this component
Use the tooltip component when you want to give a brief
description of a feature or page element. Information inside the tooltip
should be brief and helpful to the user. E.g in a form,
tooltip to explain what a certain field does.
When you should consider something else
Tooltips should never be used for critical or important
information to the user. They should also not be used for
is vital to the user for them to complete a task.
It would be more appropriate to use well formatted hint text
instead of tooltips when you
want users to fill in critical or important information in a form.
Assign colours to your tooltip using the
sgds-tooltip is-tooltip-*stateColor* class.
Having troubles with the guide? Please give us more details and we'll get back to you soon.