How to style material tooltip Angular 7

Issue

I have tried this and this, none of the answers on those questions worked for me.

What I want to do is style the tooltip, I want to be able to increase the size of the font. Currently I am only able to increase the size of the font of the <div> but the tooltip font stays the same size.

My html looks like this:

<div id="divId" matTooltipClass="tooltip" matTooltip="This is a tooltip." matTooltipPosition="above"></div>

In the CSS I have tried using:

• ::ng-deep .mat-tooltip
• .mat-tooltip
• .mat-tooltip.tooltip

As well as using !important. None of these made any difference to the style of the tooltip.

Why do none of these solutions work and what is the solution to be able to style the tooltip?

Solution

Add your style to global styles, material tooltip as well as dialogs are rendered outside of app-root. Your style dont work even with important becouse hierarchy of your rendered css is probably too low.

If you have external css in your assets folder and configured angular.json, then your style should be there.

Answered By - Jacek Ratajewski