CODEWITHSUNDEEP
htmlcssangular
JackU
JackU

Reputation: 1476

How to style material tooltip Angular 7

I have tried this and this, none of the answers on those questions worked for me.

What I want to do is style the tooltip, I want to be able to increase the size of the font. Currently I am only able to increase the size of the font of the <div> but the tooltip font stays the same size.

My html looks like this:

<div id="divId" matTooltipClass="tooltip" matTooltip="This is a tooltip." matTooltipPosition="above"></div>

In the CSS I have tried using:

As well as using !important. None of these made any difference to the style of the tooltip.

Why do none of these solutions work and what is the solution to be able to style the tooltip?

Upvotes: 7

Views: 10285

Answers (4)

Ganesh K
Ganesh K

Reputation: 101

Either you can use encapsulation: ViewEncapsulation.None in your component OR you can use global styles (Ex:styles.scss)

<button mat-raised-button
       matTooltip="Info about the action"
       matTooltipClass="custom-tooltip"
       aria-label="Button that shows a red tooltip">
  Red-tooltip Action
</button>

styles.scss

.custom-tooltip {
  background-color:white;
  height: auto;
  color: #000 !important;
  font-weight: 400;
  border-radius: 5px;
  font-size: 13px;
  padding: 8px;
  text-align: center;
  box-shadow: 0 1px 3px 0 rgb(28 28 28 / 35%);
}

Upvotes: 2

Yehouda
Yehouda

Reputation: 122

::ng-deep is not necessary !

this is how it is written in the official documentation

component.ts :

    @Component({
  selector: 'tooltip-custom-class-example',
  templateUrl: 'tooltip-custom-class-example.html',
  styleUrls: ['tooltip-custom-class-example.css'],

  // Need to remove view encapsulation so that the custom tooltip style defined in
  // `tooltip-custom-class-example.css` will not be scoped to this component's view.
  encapsulation: ViewEncapsulation.None, //DON'T FORGET TO ADD THIS LINE
})

component.html

<button mat-raised-button
        matTooltip="Info about the action"
        matTooltipClass="example-tooltip-red"
        aria-label="Button that shows a red tooltip"
        class="example-button">
  Red-tooltip Action
</button>

component.css

.example-tooltip-red {
  background: #b71c1c;
}

Upvotes: 1

Max Medina
Max Medina

Reputation: 190

You can also try to make your selector more specific. by doing this in your *-component.css file so it doesn't get overriden

enter image description here

Then you can see your tooltip with your custom style.

enter image description here

Upvotes: 0

Jacek Ratajewski
Jacek Ratajewski

Reputation: 278

Add your style to global styles, material tooltip as well as dialogs are rendered outside of app-root. Your style dont work even with important becouse hierarchy of your rendered css is probably too low.

If you have external css in your assets folder and configured angular.json, then your style should be there.

Upvotes: 6

Related Questions