Skip to main content

Tooltips

Tooltips are an embedded formfactor. They don't float on top of your interface, but sit within it. They're used as a persistent entrypoint to information or a CTA that relates to the interface element they live within.

A common use case for tooltips is to provide explanatory information. For example, placing a tooltip next to a page title that explains the purpose of the page is a common pattern.

Markers​

You can choose from 3 types of "markers" for the actual affordance of the tooltip you place:

  • Beacon: A pulsing orb, this marker is very salient, so we recommend using it scarcely for tooltips that relate to some sort of change. For example, you might use this marker for a tooltip that explains a critical change to a page.
  • Icon: this is a classic affordance for a tooltip that provides contextual help. You can safely use this marker for permanent tooltips. You've got six variants to choose from.
  • Image: upload your own image if you have something specific in mind.

Show on hover or click​

To show on hover, or to show on click, that is the question. Uncharacteristically, we don't have a preference here. Choose whatever floats your boat (your users' boat, that is).

Selecting a tooltip anchor​

Selecting a tooltip anchor works the same way as selecting a pin anchor.

Embedding blocks in tooltips​

Like all nudges, tooltips can contain more than text: they can contain any block. Common use cases for tooltips include embedding microsurveys ("what do you think of this feature" kinda thing), inviting the user to kick off a contextually relevant tour, or linking out to a pertinent article or video.