Tooltips

Tooltips display brief labels or messages

Tooltip

Hover me

<mc-button tooltip="tooltip text">Hover me</mc-button>

Rich tooltip

Hover me

Subhead

Use rich tooltips to provide more details, like describing the value of a feature action

<mc-button tooltip-target=one>Hover me</mc-button>
<mc-tooltip id=one rich>
  <div slot=subhead>Subhead</div>
  Use rich tooltips to provide more details, like describing the value of a feature
  <mc-button slot=actions>action</mc-button>
</mc-tooltip>

Style

CSS variables that allow you override default values

/* Optional variables for overriding */

--mc-textfield-shape: ar(--mc-shape-extra-small-top);
--mc-textfield-container-color: var(--mc-surface-container-highest);
--mc-textfield-input-text-color: var(--mc-on-surface);
--mc-textfield-label-text-color: var(--mc-on-surface-variant);
--mc-textfield-active-indicator-color: var(--mc-primary);