Key Points
- Tooltips are trigger by an icon button, this should be within close proximity to the content the tooltip is supporting
- Tooltips should only contain text, for more complex content use a popover
- Tooltips are triggered on hover or by being tapped on touch devices
- Tooltips can be displayed in multiple orientations
Usage

Tooltips require an icon button to trigger their display. The button can be triggered by tapping or hover events.
The content within a tooltip is text only, and this text should be concise and helpful. The tooltip will expand as the text wraps over multiple lines. The width of the tooltip can be adjusted but should not exceed our maximum line-length limit.
Orientation

Tooltips can be placed around all four directions of the icon button depending on their usage in the overall UI. If the containing text greatly increases the height then the arrow indicator can move to an edge of a side as required.

When Not To Use
Tooltips should not be used:
- When the textual information contained within is required by the user to complete an action. This content should be placed in helper text or an alert component within the UI
- Do not include media or other interactive elements within a tooltip, use a popover instead
Tooltips v Popovers
|
Popover |
Tooltip |
---|---|---|
Content |
Text, media and other component |
Concise text only |
Event Trigger |
Triggered by tapping or hovering an icon button |
Triggered by tapping or hovering an icon button |
Overall Height |
Popovers can be adjusted to suit the content. Content that is greater that container height will trigger a scrollbar. |
Tooltip expand as text increase, but each line should not exceed maximum length |