Geek Answers Handbook

Customize Angular Material 2 Tip Types

In AngularJS, you can create CSS hints using a selector .md-tooltip

How can I customize the tooltips in Angular 4 format?

EDIT:

I am using Angular 4 and Material2.

An example of how I use it:

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

This shows the tooltip very well, except that I don’t know how to style it.

+13
source share
6 answers

If you want to customize the css tooltip you can use ::ng-deep. Add the following styles to the styles of your components:

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

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

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

css ::ng-deep.

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

angular/material2 Tooltip Demo

, ( CSS, , , , ):

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


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

CSS :

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

matTooltipClass="red-tooltip" . styles.css

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

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

: ; (mat-tooltip), ! important;

:

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:

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

CSS:

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

!

+4

Angular Material 'matTooltipClass'

HTML

 ' 

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

    '

CSS

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

    }
0

matTooltipClass . :: ng-deep , : ViewEncapsulation.None. Angular . : ng-deep ( /deep/ >>> ) viewEncapsulation , , , . , , .

0

More articles:


All Articles