Tooltip

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

Orientation

Tooltips can be placed in all four directions around the icon button, depending on their usage in the overall UI:

Top — Tooltip appears above the icon button

Right — Tooltip appears to the right of the icon button

Bottom — Tooltip appears below the icon button

Left — Tooltip appears to the left of the icon button

If the text greatly increases the height of the tooltip, the arrow indicator can move to an edge of a side as required to maintain proper alignment.

Mockup of tooltips on the base surface being displayed in top, left, bottom and right orientations

Tooltip orientation examples

Display and dismissal

Tooltips appear when the user hovers over, focuses on, or taps the icon button

Tooltips disappear when:

The user moves their mouse away

The user removes keyboard focus

The user taps elsewhere on touch devices

The user presses the Escape key (keyboard users)

Width and wrapping

The width of the tooltip can be adjusted based on content, but should not exceed the maximum line-length limit. Text will wrap to multiple lines as needed.