Component reference

Tooltip

Material 3 Expressive Tooltip component for informative text on hover or focus.

Material 3Web ComponentFramework agnostic

Plain Tooltip

Hover me

Bottom

<m3-tooltip text="Save" placement="top">
  <m3-button>Save</m3-button>
</m3-tooltip>

Interactive Rich Tooltip

Move from the trigger into the surface, or use the link with the keyboard. Press Escape to dismiss.

More details

Storage limitYou have 2 GB remaining. Manage storage

<m3-tooltip variant="rich" placement="right">
  <m3-button>More details</m3-button>
  <strong slot="title">Storage limit</strong>
  <span slot="content">You have 2 GB remaining. <a href="/storage">Manage storage</a></span>
</m3-tooltip>