Set font size of Angular Material Tooltip
Solution 1
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.
Solution 2
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.
Solution 3
You can use css /deep/
selector.
For example:
/deep/ .mat-tooltip {
font-size: 14px;
}
Then you do not have to use !important
Solution 4
Add ng-deep
before class name
Try this
::ng-deep .mat-tooltip {
background: red!important;
}
Solution 5
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;
}
GLR
Software enthusiast. I have worked developing software at several engineering/industrial companies, mainly with Python, Matlab and C/C++, also mixing these programming languages with web technologies.
Updated on January 09, 2022Comments
-
GLR over 2 years
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.
-
GLR about 7 yearsUnfortunately, this only changes the font size of the text which is inside the
div
element ('Show tooltip'), but not the text of the tooltip. -
G.Acikgoz about 7 yearsOh sorry, I have an posted issue for you I hope that helps : github.com/angular/material2/issues/3927
-
Admin almost 7 yearsCan you add :host to the beginning of the line? :host /deep/ .mat-tooltip {...} I think, this can help you. Good luck!
-
Alic W almost 7 years@GLR - depending on Angular version you may need to use ::ng-deep .mat-tooltip { font-size: 14px; }
-
Admin almost 7 years@GLR You can read this - stackoverflow.com/questions/32853924/… I hope, this help you to understand how it work.
-
aruno about 6 yearsIf you use
.mat-tooltip.largerTooltip
in the css definition then you don't need to put!important
. I updated the code. -
Alexei - check Codidact almost 6 years+1. Besides allowing to avoid !important, is also works if specified within the component css rather than global css.
-
Idan Yadgar almost 6 yearsdeep is deprecated
-
hamid reza over 5 yearsThanks but it worked for me without setting !important.
-
Nikhil Kumar vats over 4 years@hamidreza Can you please explain why css change in component css doens't work while if we add this into global works?
-
hamid reza over 4 years@NikhilKumarvats Sorry! I can't.
-
iNikhil19 over 4 years@NikhilKumarvats you might need to consider overriding it with ng-deep
-
Tim Harker over 4 years@IdanYadgar with deep being deprecated, what should you use instead?
-
Gel almost 4 yearshmm, 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. -
FabianTe over 3 yearsThis does not work as of 15.11.2020. All i did was add the tree lines T. Bulford also added :(
-
Yaniv K. almost 3 years@GilEpshtain That's the only thing that worked for me out of all the solutions here