Tooltips

arrow_back arrow_forward

Tooltips display informative text when users hover or focus on an element. Two variants — plain and rich — serve different information needs.

Variants

Add to favourites

Plain tooltip · hover to show

Keyboard shortcut

Use ⌘K to search anywhere.

Learn more

Rich tooltip · hover to show

<!-- Plain tooltip -->
<div class="tooltip-wrap">
  <div class="tooltip-plain">Add to favourites</div>
  <button class="btn btn-tonal">
    <span class="material-icons-round">favorite_border</span>Favourite
  </button>
</div>

<!-- Rich tooltip -->
<div class="tooltip-wrap">
  <div class="tooltip-rich">
    <div class="tooltip-rich-title">Keyboard shortcut</div>
    <div class="tooltip-rich-body">
      Use <kbd>⌘K</kbd> to search anywhere.
    </div>
    <a href="#">Learn more</a>
  </div>
  <button class="btn btn-tonal">Rich tooltip</button>
</div>

Specs

Property	Value	Token
Plain bg	#141F1E	`color.inverse-surface`
Plain radius	6px	`tooltip.plain.radius`
Rich radius	12px	`tooltip.rich.radius`
Show delay	500ms	`tooltip.delay`

← Previous Toggle Group