How to style material tooltip Angular 7

Question

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?

score 5 · Accepted Answer · answered Jul 25 '19 at 13:19

5

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 Jul 25 '19 at 13:19

Jacek Ratajewski

248
1
10

1

Also /deep/ and ::ng-deep are currently depracated(look here): https://angular.io/guide/component-styles – Jacek Ratajewski Jul 25 '19 at 13:26

Yehouda · Answer 2 · 2020-12-02T10:02:49.640

::ng-deep is not necessary !

this is how it is written in the official documentation

component.ts :

    @Component({
  selector: 'tooltip-custom-class-example',
  templateUrl: 'tooltip-custom-class-example.html',
  styleUrls: ['tooltip-custom-class-example.css'],

  // Need to remove view encapsulation so that the custom tooltip style defined in
  // `tooltip-custom-class-example.css` will not be scoped to this component's view.
  encapsulation: ViewEncapsulation.None, //DON'T FORGET TO ADD THIS LINE
})

component.html

<button mat-raised-button
        matTooltip="Info about the action"
        matTooltipClass="example-tooltip-red"
        aria-label="Button that shows a red tooltip"
        class="example-button">
  Red-tooltip Action
</button>

component.css

.example-tooltip-red {
  background: #b71c1c;
}

score 1 · Answer 3 · answered Apr 28 '21 at 06:14

Either you can use encapsulation: ViewEncapsulation.None in your component OR you can use global styles (Ex:styles.scss)

<button mat-raised-button
       matTooltip="Info about the action"
       matTooltipClass="custom-tooltip"
       aria-label="Button that shows a red tooltip">
  Red-tooltip Action
</button>

styles.scss

.custom-tooltip {
  background-color:white;
  height: auto;
  color: #000 !important;
  font-weight: 400;
  border-radius: 5px;
  font-size: 13px;
  padding: 8px;
  text-align: center;
  box-shadow: 0 1px 3px 0 rgb(28 28 28 / 35%);
}

score 0 · Answer 4 · answered Jul 25 '19 at 13:54

0

You can also try to make your selector more specific. by doing this in your *-component.css file so it doesn't get overriden

Then you can see your tooltip with your custom style.

answered Jul 25 '19 at 13:54

Max Medina

171
2
4

How to style material tooltip Angular 7

4 Answers4