Customize Angular Material 2 Tooltip styles

Question

In AngularJS is possible to style tooltips in CSS using the selector .md-tooltip

What is the way to have custom format tooltips in Angular 4?

EDIT:

I am using Angular 4 & Material2.

An example of how I am using it is:

<span mdTooltip='TEST' mdTooltipPosition='right'>TEST</span>

It shows the tooltip pretty fine, except the fact that I don´t know how to style it.

Are you using material 2? Show some code please where you are using the tooltip. — FAISAL, Aug 19 '17 at 23:47

score 51 · Accepted Answer · edited Jul 12 '21 at 08:40

51

If you want to customize the css of the tooltip, then you can use ::ng-deep. Add the following styles in your component's styles:

::ng-deep .mat-tooltip {
    /* your own custom styles here */ 
    /* e.g. */
    color: yellow;
}

Another option is to set the View Encapsulation to None in your component:

@Component({ 
    templateUrl: './my.component.html', 
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None
})

Then in your component css you dont have to use ::ng-deep.

.mat-tooltip {
    /* your own custom styles here */ 
    /* e.g. */
    color: yellow;
}

edited Jul 12 '21 at 08:40

IAfanasov

4,775
3
27
42

answered Aug 19 '17 at 23:55

FAISAL

33,618
10
97
105

5

No need for this anymore: there is [mdTooltipClass] now, check the Axel's answer – mPrinC Nov 29 '18 at 10:23
2

need to add !important. color: yellow !important; other properties (such as background-color) works without the !important. – EranKT Jan 18 '19 at 23:35
3

For Angular9+ and material you have to use `!important` `::ng-deep .mat-tooltip { /* your own custom styles here */ /* e.g. */ color: yellow !important; }` – Saad Abbasi Aug 24 '20 at 11:01

score 31 · Answer 2 · edited Jul 12 '21 at 08:41

31

You could take a look into the following example angular/material2 Tooltip Demo

Basically you could set up the tooltip as follows (you could define not only the css but also the position, the hide delay, the show delay and if it is disable or not):

<button #tooltip="mdTooltip"
            md-raised-button
            color="primary"
            [mdTooltip]="message"
            [mdTooltipPosition]="position"
            [mdTooltipDisabled]="disabled"
            [mdTooltipShowDelay]="showDelay"
            [mdTooltipHideDelay]="hideDelay"
            [mdTooltipClass]="{'red-tooltip': showExtraClass}">

In your component then

position: TooltipPosition = 'below';
message: string = 'Here is the tooltip';
disabled = false;
showDelay = 0;
hideDelay = 1000;
showExtraClass = true;

And the css as example:

/deep/ .red-tooltip {
  background-color: rgb(255, 128, 128);
  color: black;
}

edited Jul 12 '21 at 08:41

IAfanasov

4,775
3
27
42

answered Aug 24 '17 at 13:12

Axel Freiria

419
3
4

to me works with /deep/ and in the last versions with [matTooltipClass] – ackuser May 07 '18 at 14:49
Great answer! Works for MatTooltipModule too. Just use the matTooltip syntax. – PlunkettBoy Mar 19 '19 at 18:43
1

The link to the demo is dead. would be nice to change it – IAfanasov Jul 12 '21 at 08:43
For me the "color" property worked only when I added "!important" – Moshe Kohavi Jun 19 '22 at 06:01

score 16 · Answer 3 · edited Mar 15 '19 at 06:29

16

Simply add a matTooltipClass="red-tooltip" in your input tag may be. And then in styles.css add the definition for this class

<input type="number" matTooltipClass='red-tooltip'/>

.red-tooltip{
       background-color:red;
}

edited Mar 15 '19 at 06:29

Ramin Ahmadi

619
5
13

answered Jan 22 '19 at 09:07

sumit

269
3
11

I think you mean `.red-tooltip{ ...` – yam Mar 01 '19 at 15:36
5

It won't work without `ViewEncapsulation` set to `None` or without the `::ng-deep` pseudo selector. Please note that the latter one is soon to be removed because it can potentially encourage bad styling practices. – webpreneur May 30 '19 at 06:39

Denis Cocca · Answer 4 · 2017-12-07T08:35:43.537

7

color: yellow; does not overwrite the class (mat-tooltip) you have to add !important;

like this:

XX.component.ts:

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-tooltip-demo',
  templateUrl: './XX.component.html',
  styleUrls: ['./XX.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class TooltipDemoComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

HTML Template:

<div matTooltip="This is the Tooltip!" matTooltipPosition="below">This text has a tooltip!</div>

CSS Template:

.mat-tooltip {
  color: yellow !important;
}

then it will work !

edited Dec 07 '17 at 08:35

answered Nov 30 '17 at 14:53

Denis Cocca

87
1
2

1

this should be a comment to the answer your are talking about, otherwise it's very confusing and lacking context! – LeonH Nov 30 '17 at 15:01
1

Never use !important if it is not necessary – Ling Vu Oct 14 '19 at 13:18

score 7 · Answer 5 · answered Sep 30 '19 at 14:09

Always use the matTooltipClass and a custom class. Never use ::ng-deep directly on a material class and NEVER, NEVER set encapsulation: ViewEncapsulation.None. Angular components are made to be modular and have their own style. Both :ng-deep(or /deep/ or >>> or whatever they call it these days) and viewEncapsulation are going to override styles that you might want to keep contained in other components. I was fooled once by these, there is no easy work sometimes but these can cause you serious layout damage.

score 4 · Answer 6 · answered Mar 24 '21 at 09:28

We can use matTooltipClass

In the HTML

<button mat-icon-button matTooltip="Download" matTooltipPosition="right" matTooltipClass="tooltipStyle">
  <mat-icon>download</mat-icon>
</button>

In the CSS

.mat-tooltip.tooltipStyle {
    font-size: 11px;
    color: red;
}

score 1 · Answer 7 · answered May 16 '19 at 15:47

Angular Material tooltip exposes input property 'matTooltipClass'

So in the HTML

 ` 

        <mat-icon color="primary" matTooltip="test"
                    [matTooltipClass]="{ 'tool-tip': true }"
                    >help</mat-icon>

    `

In the CSS

   .tool-tip {
      color: white;
      background-color: red;

    }

score 0 · Answer 8 · answered Aug 25 '21 at 16:38

Here's a solution without ::ng-deep / ViewEncapsulation.None. With it you can also use different tooltips in same / different components and each will have their own separate style.

Firstly, in styles.scss define
.mat-tooltip.my-tooltip
{
background-color: blue !important;
}
Then in the html component with matTooltip use:
[matTooltipClass]="'my-tooltip'"
I hope this helps

score 0 · Answer 9 · answered Aug 18 '22 at 06:47

Late at the party :-| Just in case somebody has as well the troubles. Angular Material won't apply the class if its encapsulated. The solution?

Put the style in the styles.scss file and using !important. This finally solved my problem. e.g.

.red-tooltip {
    background-color: red !important;
    font-size: larger !important;
}

Customize Angular Material 2 Tooltip styles

9 Answers9

Linked