Set font size of Angular Material Tooltip

Question

I am very new to web development, and I cannot figure out how to solve the following issue, although it may be very easy.

I am using Angular 4 and Angular Material t

Answer 1

Add ng-deep before class name

Try this

::ng-deep .mat-tooltip {
    background: red!important;
}

Answer 2

You can use css /deep/ selector. For example:

/deep/ .mat-tooltip {
  font-size: 14px;
}

Then you do not have to use !important

Answer 3

Per the documentation here: https://material.angular.io/components/tooltip/api

And the spec: https://github.com/angular/material2/blob/master/src/lib/tooltip/tooltip.spec.ts

You can set the property 'matTooltipClass', as follows:

<div matTooltip="tooltip text" matTooltipPosition="above" matTooltipClass="tooltip">
  <span>Show tooltip</span>
</div>

Then in your CSS (global - not for the component):

  .mat-tooltip.tooltip {
    background-color: darkblue;
    font-size: 12px;
  }

Also see their demo here: https://github.com/angular/material2/tree/master/src/demo-app/tooltip

Also keep in mind if you are using SASS, that the container for the tooltip is at the bottom and nowhere near where you are placing it in your component's HTML, so do not nest it in that component. Make sure it is standalone, otherwise it will not work. This note applies as well obviously to the comment above if you just choose to override .mat-tooltip

To see the changes, in developer tools, find the div at the bottom with the class "cdk-overlay-container". Then hover over the element. You can use your arrow keys to navigate into the element while you are hovered over to confirm whether your class is being added.

Answer 4

Try this way. It should work.

test.component.html

<div mdTooltip="tooltip text" mdTooltipPosition="above" matTooltipClass="myTest-tooltip">
  <span>Show tooltip</span>
</div>

test.component.ts

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  encapsulation: ViewEncapsulation.None,
  /*
  styles: [`
   .myTest-tooltip {
      min-width: 300px;
      background-color: #FC5558;
      font-size: 16px;
   }
`]*/
})

test.component.scss

.myTest-tooltip {
    min-width: 300px;
    background-color: #FC5558;
    font-size: 16px;
}

Answer 5

You can fix this by adding a .mat-tooltip css declaration in you main styles file and change the font size there. You need to set !important on the font size otherwise it won't show up.

Answer 6

My problem was that using a globally defined css class-name such as .customname-toolip for matTooltipClass was NOT working. My solution below, and the !important was needed; set in the global styles.css file:

.mat-tooltip {
font-size: 16px !important;

}