CODEWITHSUNDEEP
angularangular-materialangular-material2
Nizam
Nizam

Reputation: 4699

Customize Angular Material 2 Tooltip styles

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.

Upvotes: 38

Views: 138374

Answers (11)

amanda
amanda

Reputation: 1136

When I inspected MatTooltip, I saw it uses .mdc-tooltip and .mdc-tooltip__surface classes for styling. I then used the matTooltipClass property to specify the custom tooltip.

on HTML Element:

[matTooltip]="Tooltip Text" 
matTooltipClass="custom-tooltip">

CSS:

.mdc-tooltip.custom-tooltip {
   .mdc-tooltip__surface {
       background-color: black;
       color: white;
   }
 }

Make sure you put the CSS in the global css file with no encapsulation, because MatTooltip does not render inside the component, it actually loads at the bottom of the elements.

Upvotes: 3

Darren Street
Darren Street

Reputation: 1830

For newer versions ( I'm using v15), using the specific class declaration (in the html markup) is just a lot of repetition & duplication.

I wanted a global way.

.mat-mdc-tooltip {
  --mdc-plain-tooltip-container-color: #fff;
  --mdc-plain-tooltip-supporting-text-font: "Baloo 2", sans-serif;
  --mdc-plain-tooltip-supporting-text-size: 14px;
  --mdc-plain-tooltip-supporting-text-weight: 100;
  --mdc-plain-tooltip-supporting-text-color: #000;
 }

 .mdc-tooltip__surface {
   letter-spacing: -0.5px!important;
   border: 1px solid #333!important;
 }

This works just fine across the whole site. Actually I have it in my core SCSS file.

For purists I get it, !important is bad, but for devs on budget and don't want to spend hours writing a theme for ONE compnent, this works.

Upvotes: 1

LeO
LeO

Reputation: 5238

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

Upvotes: 1

Zerg
Zerg

Reputation: 789

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

Upvotes: 0

Axel Freiria
Axel Freiria

Reputation: 419

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

Upvotes: 31

FAISAL
FAISAL

Reputation: 34673

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

Upvotes: 52

Sarun
Sarun

Reputation: 354

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

Upvotes: 3

Alex1994
Alex1994

Reputation: 99

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.

Upvotes: 9

sai amar
sai amar

Reputation: 1848

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;

    }

Upvotes: 1

sumit
sumit

Reputation: 289

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

Upvotes: 17

Denis Cocca
Denis Cocca

Reputation: 85

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 !

Upvotes: 6

Related Questions