Tooltips are user-triggered messages that help provide additional information to a page element. They are usually activated by a mouse hover, keyboard focus, or tap.
- Tooltips can be paired with any page element, such as icons, buttons, text, etc.
- Tooltip messages should not be critical for the user to read.
- There should be no action included within tooltips.
For a more detailed breakdown of spacing and sizing, view the design specs.
- Container: the container of the Tooltip
- Page element: paired with Tooltips to indicate additional information is available on hover/focus state
- Label: a brief message that provides additional information to users
- Tip: an arrow pointing from the Tooltip container to the related page element
Depending on the location, Tooltips can be placed at the top, bottom, right, or left of the related page element.
Mouse hover action
Tooltips appear on hover and remain active until the user's cursor is no longer hovering over the associated page element. A 200ms fade transitions the visibility of Tooltips.
When using a keyboard, users can use [tab] key to go through and select page elements. Tooltips appear when an element is in its keyboard focus state.
For mobile devices such as cellphones and tablets, mouse-hover and keyboard focus states are not accessible for users. Tooltips are activated by tapping on the page element, and tap again to deactivate Tooltips.
Tooltip messages should not repeat what's already visible on the screen.
- Always make sure that the Tooltip arrow is pointing at the associated page content and is vertically or horizontally centered based on the tooltip message
- Keep Tooltips brief and concise. In certain scenarios, this text may flow onto a second line within the Tooltip. If the text is too complex or an action needs to be taken, you may need to consider a different delivery option for this information.