Set font size of Angular Material Tooltip
CssAngularTooltipAngular MaterialAngular Material2Css Problem Overview
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.
Css Solutions
Solution 1 - Css
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 - Css
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 - Css
You can use css /deep/
selector.
For example:
/deep/ .mat-tooltip {
font-size: 14px;
}
Then you do not have to use !important
Solution 4 - Css
Add ng-deep
before class name
Try this
::ng-deep .mat-tooltip {
background: red!important;
}
Solution 5 - Css
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;
}
Solution 6 - Css
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>
Solution 7 - Css
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;
}
Solution 8 - Css
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;
}
Solution 9 - Css
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;
}
Solution 10 - Css
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.
Solution 11 - Css
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;
}