Mattooltipclass Not Applying CSS

matTooltipClass not applying css

You have to use ::ng-deep to override default CSS for material elements:

::ng-deep .tooltip {
  background-color: red;
  color: blue;
  font-size: 20px;
}

Angular2 Material Tooltips - Class is not being added

Either place your style in a common style sheet

Stackblitz Example

or set encapsulation to ViewEncapsulation.None on your component:

@Component({
 selector: '...',
 template: '...',
 encapsulation: ViewEncapsulation.None,
 styles: [`
   .primary-tooltip {
      min-width: 300px;
      background-color: #FC5558;
   }
`]
})
export class Component {}

Stackblitz example

MatToolTip is not working properly in Angular

Try adding the Material CSS inside your styles.css like this:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Customize Angular Material 2 Tooltip styles

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;
}

Can't make multi-line matTooltip, always getting single-line

If you are having the text coming from ts file, then please find below solution:

In .ts file:

getTooltopScript(){
  return 'Multiline Tooltip \n This is second line';
}

In HTML:

<p #tooltip2="matTooltip" [matTooltip]="getTooltopScript()">Hello World!</p>

In css file:

::ng-deep .cdk-overlay-container, .cdk-global-overlay-wrapper {
  white-space: pre-line;
}

In order to see the tooltip properly, we need to add the material style import in global stylesheet (that is style.css):

In style.css:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Please find the working example below:

https://angular-sf-tooltip-issue-fix.stackblitz.io

https://stackblitz.com/edit/angular-sf-tooltip-issue-fix?file=src%2Fapp%2Fapp.module.ts

Tooltip issue, MatTooltip not working in Angular

To use Angular-Material Tooltip you will need:

1. Import the BrowserAnimationsModule and MatTooltipModule:

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatTooltipModule,
    // ...

2. Add tooltip to your component

test.component.html

<div matTooltip="Tooltip!">Hover me</div>

3. P.S If you haven't already installed and imported HammerJs you may need to (Material uses it for some animations and touch gestures):
   
   npm i -S hammerjs
npm i -D @types/hammerjs
   

And in your app.module.js import hammerjs:

import 'hammerjs'; 

To view full working example see: https://stackblitz.com/angular/keqjqmxbrbg

Update

I found a memory leak in my application, due to extensive use of mat-tooltip (in a loop). This memory leak can be fixed by removing HammerJS.

For more info and other possible solutions (instead of removing HammerJS) see:
https://github.com/angular/material2/issues/4499

How to style material tooltip Angular 7

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.

---

Related Topics