Search code examples
angularangular-materialangular11

Angular Material Tooltip not working after upgrade to Angular 11

I have been using the Angular Material tooltip in my application, but when I recently upgraded to Angular 11, it has stopped working. I created a test component with the following code in the template, which I copied directly from https://material.angular.io/components/tooltip/overview

<button mat-raised-button
        matTooltip="Info about the action"
        aria-label="Button that displays a tooltip when focused or hovered over">
  Action
</button>

I have Chrome dev tools open, and I can see changes to the template happening when I hover, but I still cannot see the tooltip on the screen.

I have Angular Material installed, and I have imported all necessary modules, so I am not sure what the issue is (possibly just a bug in Angular Material?)

Solution

  • I have a custom theme .scss file. I found that I needed some entries for tooltip in the theme, which I did not have before. Not sure why this is needed now but wasn't before. I added

    tooltip: map_get($mat-grey, 700)

    to a couple spots in my scss file. See github.com/angular/components/issues/18139