Tooltip
Tooltip
Usage
A Tooltip is a floating label that briefly explains the function of a UI element. Tooltips can be used when needed to provide helpful contextual information on the UI to the user.
Tooltips can only contain text. The text should be short (no more than three rows of text inside the tooltip container) with clear language and proper punctuation.
The triangular arrow points to the element that triggered it. Tooltip arrow placement, depending on the context of use, can appear at the bottom, left, right, or top. Tooltip appearance should never cover the content that it's referring to.
Behaviour
Set the tooltip trigger by default to hover, and provide focus or tap interactions for accessibility on keyboard and mobile devices
The tooltip should appear immediately when the trigger element is hovered over, focused, or pressed, and should disappear when the trigger element has no interaction
Best Practice
Tooltips should be used to provide useful, additional information or clarification
When using icon buttons, always use tooltips to provide a clear description of an action
Tooltips should not contain any interactive elements, such as links or buttons, and can contain a maximum of three rows of text
Use tooltips as part of validation to show additional information on how to correct an error
Don’t place tooltips in such a way that interferes with what the user is doing by obscuring the object of interest
Tooltip Trigger and Placement
Tooltip can be triggered on hover, focus, or tap. The most commonly used tooltip trigger is the info icon button of 20px size. The info icon button can be placed to the right of the input, check box or radio label, to the right of the form input, or to the right of the title or subtitle. The tooltip can, in some cases, also be placed directly on an element (like a button inside the form).
Tooltip and the trigger icon button can be used as a part of the validation pattern - in this case, the colour should be set to the validation colour.
Tooltip and Trigger Size
Last updated
