Skip to main content

Tooltip

A tooltip is a contextual message that appears when users interact with an element, providing additional information or guidance.

Dos and Don'ts

Do
  • Ensure messaging is succinct and only use when necessary to provide an explanation for an interface element.
  • Use tooltips consistently throughout the page.
  • Consider clarifying the design and language if you require lots of tooltips.
Don't
  • Don’t use tooltips to communicate errors or critical information.
  • Do not use tooltips to restate visible UI text.

Anatomy

Anatomy of the Android tooltip component.
  1. Title (Optional): Provides overall context of the content.
  2. Body copy: Provides supporting information to the user.
  3. Close icon (Optional): Allows the user to dismiss the tooltip.
  4. Pointer: A visual link between the tooltip container and the trigger element.
  5. Button (Optional): A button to outline the user's next options.

Variants

Ensure the correct variation of the tooltip is used depending on the background content to ensure enough contrast.

Default

Used on light backgrounds or containers.

Default variant of the Android tooltip component.

Inverse

Used on dark backgrounds or containers.

Inverse variant of the Android tooltip component in an inverse solid background.
Inverse variant of the Android tooltip component in a complex background.

Modifiers

Pointer placement

A tooltip can open at the top, bottom, left or right depending on the position of the UI trigger on the screen. In addition, we can select the alignment to the associated UI element. The UI element can be aligned to the left, centre or right of the tooltip depending on the space available.

By default, the tooltip opens from the bottom, which means the pointer is positioned top-centre.

Do
  • Ensure tooltips are clearly positioned in relation to their trigger or related content.
Don't
  • Avoid placing a tooltip over any important information.
  • Avoid placing a tooltip over any navigation.
  • Avoid the tooltip extending off the page and getting cropped.

Top-left

Tooltip positioned at the top-left of the trigger element.

Top-centre

Tooltip positioned at the top-centre of the trigger element.

Top-right

Tooltip positioned at the top-right of the trigger element.

Bottom-left

Tooltip positioned at the bottom-left of the trigger element.

Bottom-centre

Tooltip positioned at the bottom-centre of the trigger element.

Bottom-right

Tooltip positioned at the bottom-right of the trigger element.

Right-centre

Tooltip positioned at the right-centre of the trigger element.

Left-centre

Tooltip positioned at the left-centre of the trigger element.

Title

The title can be removed where it is not necessary.

With title

Tooltip with a title.

Without title

Tooltip without a title.

Action

Tooltips can offer a single action through the use of a button.

With action

Tooltip with an action.

Without action

Tooltip without an action.

Close

For tooltips that need to be closed manually.

With close

Tooltip with a close button.

Without close

Tooltip without a close button.

Sizes

Width

Predefined

By default, tooltips have a fixed width of 280px and are not dynamic with the content or container.

Example of Android tooltip component with the predefined width.

Fluid to content

The width of the container is dynamic to the width of the content and retains 12px left and right padding if there is no close icon, and 8px to the right if there is a close icon.

Example of Android tooltip component with width fluid to content.

Fluid to container

The width is 100% of the container in which the trigger and tooltip are placed, and can only be applied to top and bottom tooltips.

Example of Android tooltip component with width fluid to container.

Placement

Spacing

Tooltip should have 4px spacing between the pointer and the associated UI element.

Example of Android tooltip component showing 4px spacing between end of the pointer and element.

Pointer

Always position the tooltip pointer relative to the centre of the element.

Example of Android tooltip component showing the pointer centered relative to the element.
The pointer remains centered to the element when the tooltip is at the edge of the screen.
Tooltip opening to the right of a trigger near the left edge of the screen, with the pointer centred on the trigger element.
Tooltip repositioning away from the screen edge with the pointer remaining centred on the trigger element.

Behaviours

Trigger

A trigger can be any UI element, such as a standalone icon, icon button or text.

  • Tooltips are triggered by tapping.
  • Tooltips can also be triggered automatically by the system, without any manual input from the user.
Tooltip placed on the left.
Tooltip placed on the left top.

Close

Auto-dismiss

The tooltip will automatically disappear 1500ms after being triggered. Since the user cannot manually dismiss it, the close function has been removed.

Example of Android tooltip component showing the pointer centered relative to the element.

Persistent

If the tooltip includes a close icon or button, the tooltip can remain persistent until the user manually dismisses it or taps outside of the tooltip.

Example of the tooltip with a close icon button.
Example of the tooltip with a close icon and an action button.

Only one tooltip at a time

If more tooltips need to be displayed, the previous tooltip will be dismissed when the new tooltip is triggered, even if the tooltips are persistent.

Do
Example of only one tooltip being displayed at a time.
Don't
Example of two tooltips being triggered at the same time.

Interactions

Trigger

When a tooltip is manually triggered, the touch target area must be at least 48px by 48px to ensure accessibility. If the UI element is smaller than this size, the touch target area can extend beyond the visible element.

Example of the tooltip component triggered by an interactive icon and the touch target area around the interactive element.

Close

A tooltip can be closed in one of three ways: by tapping on the close icon, by tapping on the action button or outside the tooltip.

Example of the tooltip with a close icon button.
Example of the tooltip with a close icon and an action button.

Content

  • All content should use sentence case.
  • Tooltip messages should be brief, always using clear and concise phrasing.
  • Should not contain crucial information. Important information should always be visible, not hidden in tooltips.
  • The title should aim to be kept between 1–2 lines of text.
  • The body copy should aim to not exceed 4 lines of text.
  • The body copy weight can be increased to highlight specific pieces of text within the content.

Overflow

If the content exceeds the available width, the title and body copy wrap to a new line. Content will be left aligned.

Example of the tooltip component with content overflow.

Examples

LTR examples

Here are some examples of the component in left-to-right context:

Example of the tooltip component in left-to-right context.
Example of the tooltip component in left-to-right context.

RTL examples

Here are some examples of the component in right-to-left context:

Example of the tooltip component in right-to-left context.
Example of the tooltip component in right-to-left context.
Back to top