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 to implement tooltips like this:

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

I would like to make the font size of the tooltip text bigger. However, I did not manage to find how to do this in the Angular Material documentation, neither searching in the web. Does anyone have any idea on how to do this? Thanks.

@Ploppy because sometimes big companies make bad decisions. The default font size is barely legible on a standard resolution screen. PS. look up guideline in the dictionary - what you see might surprise you ;-) — Simon_Weaver, May 10 '18 at 17:13
@Simon_Weaver I know what it means, what I meant was, why use Material Design if you don't want to actually use it? I see so many people who want to modify things completely in angular material, such as trying to redesign completely the material inputs and it makes no sens at all. — Ploppy, May 10 '18 at 17:17
@Ploppy I don't think increasing the font size by one pixel means you're not using Material Design anymore — Simon_Weaver, May 10 '18 at 17:24
@Ploppy probably this guy's boss. So what would be the cutoff pixel size increase to still be considered Material Design? Asking for a friend. — Simon_Weaver, May 10 '18 at 17:40
@Simon_Weaver I stopped at 'probably', we're not here to argue on guesses. — Ploppy, May 10 '18 at 17:44

score 64 · Accepted Answer · answered Jun 16 '17 at 11:55

64

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.

answered Jun 16 '17 at 11:55

Dean Chalk

20,076
6
59
90

1

Thanks but it worked for me without setting !important. – hamid reza Mar 07 '19 at 06:51
@hamidreza Can you please explain why css change in component css doens't work while if we add this into global works? – Nikhil Kumar vats Dec 31 '19 at 05:55
@NikhilKumarvats Sorry! I can't. – hamid reza Jan 01 '20 at 06:46
1

@NikhilKumarvats you might need to consider overriding it with ng-deep – iNikhil19 Feb 11 '20 at 03:28
This does not work as of 15.11.2020. All i did was add the tree lines T. Bulford also added :( – FabianTe Nov 15 '20 at 15:26
minus 1 for !important. – ModusPwnens Aug 10 '22 at 14:14
Worked without `!important` – O-9 Sep 14 '22 at 07:59

score 56 · Answer 2 · edited May 16 '19 at 13:43

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.

If you use `.mat-tooltip.largerTooltip` in the css definition then you don't need to put `!important`. I updated the code. — Simon_Weaver, May 10 '18 at 17:36
hmm, in our jhispter app, in the global, I kind of used the same approach but different in css hierarchy what your doing here... I had `.largerToolTip` followed by `.mat-tooltip` and it is working well atleast today September of 2020. — Gel, Sep 28 '20 at 15:16

score 17 · Answer 3 · answered Jul 27 '17 at 07:24

17

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

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

Then you do not have to use !important

answered Jul 27 '17 at 07:24

Serhii Kononov

179
4

Can you add **:host** to the beginning of the line? **:host /deep/ .mat-tooltip {...}** I think, this can help you. Good luck! – Serhii Kononov Jul 28 '17 at 09:57
4

@GLR - depending on Angular version you may need to use ::ng-deep .mat-tooltip { font-size: 14px; } – Alic W Aug 15 '17 at 00:52
@GLR You can read this - https://stackoverflow.com/questions/32853924/angular-2-how-to-style-host-element-of-the-component I hope, this help you to understand how it work. – Serhii Kononov Aug 28 '17 at 12:53
+1. Besides allowing to avoid !important, is also works if specified within the component css rather than global css. – Alexei - check Codidact Aug 31 '18 at 08:32
deep is deprecated – Idan Yadgar Sep 26 '18 at 18:09
@IdanYadgar with deep being deprecated, what should you use instead? – Tim Harker Feb 15 '20 at 22:18

score 14 · Answer 4 · answered May 10 '18 at 10:21

14

Add ng-deep before class name

Try this

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

answered May 10 '18 at 10:21

Saurabh Agrawal

7,581
2
27
51

2

@GilEpshtain That's the only thing that worked for me out of all the solutions here – Yaniv K. Sep 21 '21 at 21:54

score 6 · Answer 5 · edited Jul 12 '21 at 11:33

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;
}

edited Jul 12 '21 at 11:33

IAfanasov

4,775
3
27
42

answered Feb 27 '20 at 21:27

T. Bulford

387
5
8

score 3 · Answer 6 · answered Sep 04 '18 at 11:54

3

add following code in your styles.css to increase its font size i.e. 12px

CSS

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

and use matTooltip in your tag's as.

<p matTooltip="My Tooltip">...<p>

answered Sep 04 '18 at 11:54

score 3 · Answer 7 · answered Oct 23 '19 at 20:02

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;
}

score 2 · Answer 8 · answered Dec 07 '22 at 07:27

2

In v15, you can change css variables

body{
  .mat-mdc-tooltip{
    --mdc-plain-tooltip-container-color: #616161;
    --mdc-plain-tooltip-supporting-text-color: white;
    --mdc-plain-tooltip-supporting-text-font: Roboto, sans-serif;
    --mdc-plain-tooltip-supporting-text-size: 12px;
    --mdc-plain-tooltip-supporting-text-weight: 400;
    --mdc-plain-tooltip-supporting-text-tracking: 0.0333333333em;
    line-height: 12px;
  }
}

answered Dec 07 '22 at 07:27

dasfdsa

7,102
8
51
93

for me this answer works only with ::ng-deep which is recommended not to be used – Anna Do Jul 11 '23 at 14:47
use this in styles.scss – dasfdsa Aug 01 '23 at 13:22

score 1 · Answer 9 · answered Jan 06 '21 at 05:28

Use matTooltipClass to apply your custom class on tooltips

<button mat-raised-button
            matTooltip="Adding a class to the tooltip container"
            matTooltipClass="custom-tooltip">
      Custom tooltip
</button>

Add your style in your component style.scss file

.custom-tooltip {
  font-size: 20px !important;
}

score 1 · Answer 10 · answered Jan 08 '22 at 12:47

You can set custom style only for your component by adding a custom class + using /deep/, which will apply the css changes only for your custom class and not globally.

for example adding a custom tooltip for an image tag :

<img
   matTooltip="text"
   matTooltipClass="my-custom-class"<----
   src=""/>

and in the css file :

/deep/ .mat-tooltip.my-custom-class {<---
  background: #FFFFFF;
}

score 0 · Answer 11 · answered Jun 16 '17 at 11:02

0

I dont have an experience with angular but you may add a class or id for div. Then you may control with this class or id with css file.

<div  class="sth" mdTooltip="tooltip text" mdTooltipPosition="above"> <span>Show tooltip</span> </div>

And

.sth{
    font-size:20px;
}

in css file.

answered Jun 16 '17 at 11:02

G.Acikgoz

61
1
1
6

Unfortunately, this only changes the font size of the text which is inside the `div` element ('Show tooltip'), but not the text of the tooltip. – GLR Jun 16 '17 at 11:05
2

Oh sorry, I have an posted issue for you I hope that helps : https://github.com/angular/material2/issues/3927 – G.Acikgoz Jun 16 '17 at 11:09

score -1 · Answer 12 · answered Sep 19 '21 at 09:18

Put this in your component css (or home component css if you want to apply it globally. note that putting this in your global css file won't work, and you have to put it in the home component css to apply it globally).

::ng-deep .mat-tooltip {
  font-size: 16px;
}

Set font size of Angular Material Tooltip

12 Answers12

Linked