bug(matTooltip): Tooltip not displaying when mat-icon is nested within mat-button

[andrii-3sdev]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

In Angular Material version 17.3.x, tooltips fail to display when a mat-icon element is nested within any type of Material button, such as mat-button, mat-raised-button, mat-flat-button, etc. Despite applying the matTooltip directive to the mat-icon, the tooltip does not appear when hovering over the icon within the button. This behaviour is inconsistent with previous versions of Angular Material, where tooltips functioned correctly in similar scenarios. Unfortunately, I don't know from which version it appeared

Code Example:

Tooltip not displaying within a mat-button

<button mat-button>
  <mat-icon matTooltip="Home page">home</mat-icon>
</button>

Removing the button wrapper allows the tooltip to display as expected.

<button>
  <mat-icon matTooltip="Home page">home</mat-icon>
</button>

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-ucd6z2?file=src%2Fapp%2Fexample-component.html
Steps to reproduce:

1. Hover an icon on button
2. Hover an icon on a material button

Expected Behavior

Tooltip

Actual Behavior

No tooltip

Environment

• Angular: 17.3.x
• CDK/Material: 17.3.x
• Browser(s): all
• Operating System (e.g. Windows, macOS, Ubuntu): Windows, macOS

[Azbesciak]

Confirm, the issue is caused by spans inside with .mat-mdc-focus-indicator and .mat-mdc-button-touch-target.
If it has display: none tooltips work.

[crisbeto]

The fix here would be to stack the button's content on top of the touch target.

[gasfab999]

For now one can fix the matTooltip as well by setting the style z-index: 1 on the mat-icon element.
Then at least the icon is placed above the touch target element and the tooltip appears on hover. I'm not 100% sure if this may cause side effects on touch devices.