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