CODEWITHSUNDEEP
.netangularangular-material
Ray Megal
Ray Megal

Reputation: 9

MatTooltip Disappears Almost Immediately When Using MatTooltipClass

I'm using Angular Material to display a tooltip like so:

<button
  mat-raised-button
  matTooltip="Line one&#13;line two..."
  matTooltipClass="tooltip"
  (click)="onOne()"
>
  One
</button>
<button
  mat-raised-button
  matTooltip="Line one&#13;line two..."
  (click)="onTwo()"
>
  Two
</button>

I have the tooltip style defined in the global css file:

.tooltip {
  background: #7d1c1c;
  font-size: 16px;
  white-space: pre-line;
}

The tooltip on the Two button displays correctly with the default settings. The tooltip on button One displays with the modified style, but it disappears almost immediately.

This is a .NET project created using dotnet new angular. You can see a GIF of the problem and the code for the project here.

The tooltip using matTooltipClass works as expected in an Angular project created using ng new. I thought it might be related to Server Side Rendering (SSR), which the dotnet project uses, but the problem does not exist in the Angular project after migrating to SSR.

So, the problem only exists in the dotnet project. I've updated to the latest Angular/Material and the problem persists.

What am I missing?

Upvotes: 0

Views: 1435

Answers (1)

Ray Megal
Ray Megal

Reputation: 9

The dotnet angular template installs bootstrap, which is apparently messing with the Material Tooltip. Removing bootstrap (running npm uninstall bootstrap and deleting it from styles in angular.json) resolves the problem. That is, the matTooltipClass is applied without the tooltip immediately disappearing.

I'm using CSS Flexbox and Material in lieu of bootstrap so this is not an issue for me.

I got here by deleting the dotnet template generated app, replacing it with one generated by ng new. I then ran the app under VS2019 to ensure it worked. Finally, I compared the two and noticed the ng generated app was not installing all of the packages the dotnet templated app did. Bootstrap seemed to be the most likely candidate.

FYI I also tested this with a pure ng new app and installing bootstrap or ngx-bootstrap resulted in the same problem: the MatTooltip briefly displays and then disappears.

UPDATE: It just occurred to me that the name of the class might be the problem. I changed the style from .tooltip to .testingclass and the problem was resolved. I imagine using anything but .tooltip would be OK.

Upvotes: 1

Related Questions