Switch to M&T
DesignDevelop
Version 4.5.1
This page's guidelines are under construction. For questions on this component's use, please reach out to the Currency team.
Overview

Tooltip

Tooltips are elevated labels that provide brief, supplementary information about, or identify, the element they point to. They do not support rich text or complex operations.

Tooltips hide information by default and should be used sparingly. If the user needs to know the information within the tooltip to complete their task, place it within the main layout. Additionally, tooltip content should be unique and not repeat information that already exists on the page.

Variants

The only required element in a tooltip is body content. Depending on the variant, a Close action will be included. Tooltips can include an optional Title for increased scannability.

Default

Title

I provide additional information that is nice to have but that you don't need to complete your task.

You must click, tap or tab to open me.

Default
The Default Tooltip is the most accessible tooltip option and is triggered on tap, click or keyboard focus. It persists on screen, no matter mouse position, until it is expressly dismissed by selecting the Close action or moving focus out of the tooltip. This tooltip should be used in most cases.

Hover

Title

I provide additional information that is nice to have but that you don't need to complete your task.

You can open me on mouseover and close me on mouse away.

Hover
The Hover Tooltip is triggered on mouseover and should only be used at larger, non-touchscreen breakpoints. Outside of these environments, revert to a default tooltip.

Icon

Additional Information
Icon

Icon Tooltips label icons only in instances where the label cannot be placed within the main layout. They are triggered on mouseover and should be used sparingly.

Design Environment

Tooltips can be placed as needed to best suit the design: above, below or to the left or right of the element they point to. Offer consistent visual cues indicating a tooltip is present, either as standalone elements (e.g. help or info icons) or as a specific treatment for inline elements (e.g. dotted underline on inline text). In order to avoid a tooltip covering related content, they include a padding of 8 px between the tooltip caret and the element it points to.

The information within a tooltip will not scroll, so be careful not to overload your tooltip with content. If there is a need for additional context, consider using a Modal instead.

Microcopy

Tooltip content can be fragments or full sentences, but should be as concise as possible. Only full sentences should use end punctuation. Follow the microcopy guidelines for the Title component if included.