Tooltip

This layer component provide supporting information when triggered by hover or focus events. Information should be helpful and concise

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

Tooltip

Tooltip

Example of a tooltip placed next to a button

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

Orientations

Orientations

Examples of the tooltip 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.

 

Edges

Edges

Indicators can be positioned on the edge of each orientation

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