Tooltip contents font size is too small

[manish7singh]

Bug, feature request, or proposal:

Facing issue while changing the font size of tooltip contents

What is the expected behavior?

Want to increase the Font size of the tooltip contents

What is the current behavior?

the size is currently fixed to 10px in the tooltip.css file

What is the use-case or motivation for changing an existing behavior?

Better visual while reading

Which versions of Angular, Material, OS, browsers are affected?

Angular 4
Material 2 - beta-2
Windows 10
Chrome 58

Is there anything else we should know?

[MihailoVasovic]

I solved this issue by putting .mat-tooltip in my root styles.sass file and then setting up font-size.
The key for this to work is setting !important after font-size.

[srix55]

I had to do as Mihailo said... put changes in the root styles.sass file. I wanted to override styles in component's sass file. No amount of specificity overrides .mat-tooltip. Tried every combination of !important & /deep/ etc. Nothing changes it at the component level. I don't have any problem with other md components. What's different about tooltip that it has to be changed only at the root level? Can it not be made to be overridden at the component level?

[willshowell]

@srix55 Component styles cannot affect overlay-based components since they are attached elsewhere in the DOM

[andrewseguin]

Unfortunately we won't be able to set a size to make everyone happy, but we are trying to follow the Material spec as our best effort.

https://material.io/guidelines/components/tooltips.html#tooltips-tooltips-desktop

If you want to change the tooltip's styles, you can apply a custom class with the mdTooltipClass input and defining a style in your app's global styles.

[simeyla]

Here's the code for others looking to do this

In your global styles (NOT in the component):

.mat-tooltip.tooltip
{
    font-size: 13px;   // current default is 10px :-/
    color: yellow;
}

Then apply the matTooltipClass directive.

<span  matTooltip="Customer #{{ item.customerId }}"
                  matTooltipShowDelay="1000"
                  [matTooltipClass]="'tooltip'">

PS. I don't recommend changing color - this is just to demonstrate it is working, and to demonstrate that if you specify .mat-tooltip it will override the default and you won't need !important.

[mann-david]

Interestingly, both /deep/ and ::ng-deep would make this not work if included. Simply this in the global stylesheet is all you need (as others mentioned):

.mat-tooltip {
  font-size: 1.5rem !important;
}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}