web-dev-qa-db-fra.com

Personnaliser les styles d’infos 2 Matériel angulaire

Dans AngularJS, il est possible de styler les info-bulles en CSS à l’aide du sélecteur .md-tooltip

Quel est le moyen d'avoir des info-bulles de format personnalisé dans Angular 4?

MODIFIER:

J'utilise Angular 4 & Material2.

Voici un exemple d'utilisation:

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

La bulle d'aide est très belle, sauf que je ne sais pas comment la styliser.

cssangulartooltipangular-material2
8
Nizam

Si vous souhaitez personnaliser le css de l'info-bulle, vous pouvez utiliser ::ng-deep. Ajoutez les styles suivants dans les styles de votre composant:

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

Une autre option consiste à définir le View Encapsulation sur Aucun dans votre composant:

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

Ensuite, dans votre composant CSS, vous ne devez pas utiliser ::ng-deep.

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

Vous pouvez regarder dans l'exemple suivant angular/material2 Tooltip Demo

En gros, vous pouvez configurer l’info-bulle comme suit (vous pouvez définir non seulement le css mais aussi la position, le délai de masquage, le délai d’affichage et s’il est désactivé ou non):

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

Dans votre composant alors

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

Et le css comme exemple:

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

couleur jaune; ne remplace pas la classe (mat-tooltip), vous devez ajouter! important;

comme ça:

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() {
  }
}

Modèle HTML: 

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

Modèle CSS: 

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

alors ça va marcher!

2
Denis Cocca

Il suffit d’ajouter un matTooltipClass="red-tooltip" dans votre balise d’entrée. Et ensuite dans styles.css, ajoutez la définition de cette classe

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

.red-color{
       background-color:red;
}
0
sumit