material-tooltip

MD3 plain & rich tooltips. Hover, focus, or long-press the trigger; rich variant supports persistent click-to-open with subhead and actions.

plain (wrapper)
plain (for=id)
placement
rich
Add people Invite up to 10 collaborators to edit this document with you in real time. New feature We added inline comments — highlight any selection and press ⌘E to start a thread. Mention teammates with @name to notify them, and resolve threads from the sidebar when discussions wrap up.
persistent rich
Pro tip Press ⌘K anywhere to open the command palette.
edge (flip)
Sample usage 
<!-- plain (wrapper): first child is the trigger -->
<material-tooltip text="Edit">
  <material-icon-button icon="edit" aria-label="Edit"></material-icon-button>
</material-tooltip>

<!-- plain (for=id): tooltip references trigger by id -->
<material-icon-button id="search-btn" icon="search" aria-label="Search"></material-icon-button>
<material-tooltip for="search-btn" text="Search"></material-tooltip>

<!-- placement: top (default) | bottom | bottom-end -->
<material-tooltip text="Below" placement="bottom">...</material-tooltip>

<!-- rich: subhead + body + up to 2 actions; clicking an action closes -->
<material-tooltip variant="rich">
  <material-icon-button icon="info" aria-label="Info"></material-icon-button>
  <span slot="subhead">Add people</span>
  <span slot="body">Invite up to 10 collaborators.</span>
  <material-button slot="actions" variant="text" label="Got it"></material-button>
  <material-button slot="actions" variant="text" label="Learn more"></material-button>
</material-tooltip>

<!-- persistent: click to open, click outside to dismiss -->
<material-tooltip variant="rich" persistent>...</material-tooltip>