web-dev-qa-db-fra.com

Définir la taille de police de l'info-bulle Matériau angulaire

Je suis très novice dans le développement Web et je ne vois pas comment résoudre le problème suivant, bien que cela puisse être très simple.

J'utilise Angular 4 et Angular Material pour implémenter des info-bulles comme ceci:

<div mdTooltip="tooltip text" mdTooltipPosition="above">
  <span>Show tooltip</span>
</div>

J'aimerais agrandir la taille de la police du texte de l'info-bulle. Cependant, je n'ai pas réussi à trouver comment faire cela dans la documentation Angular Material, ni à chercher sur le Web. Quelqu'un at-il une idée sur la façon de faire cela? Merci.

cssangulartooltipangular-materialangular-material2
8
GLR

Vous pouvez résoudre ce problème en ajoutant une déclaration .mat-tooltip css dans votre fichier de styles principal et en modifiant la taille de la police. Vous devez définir !important sur la taille de la police, sinon elle ne s'affichera pas.

13
Dean Chalk

Vous pouvez utiliser le sélecteur css /deep/. Par exemple:

/deep/ .mat-tooltip {
  font-size: 14px;
}

Alors vous ne devez pas utiliser !important

11
Serhii Kononov

Selon la documentation ici: https://material.angular.io/components/tooltip/api

Et la spécification: https://github.com/angular/material2/blob/master/src/lib/tooltip/tooltip.spec.ts

Vous pouvez définir la propriété 'matTooltipClass' comme suit:

<div matTooltip="tooltip text" matTooltipPosition="'above'" [matTooltipClass]="'tooltip'">
  <span>Show tooltip</span>
</div>

Puis dans votre CSS (global - pas pour le composant):

  .mat-tooltip.tooltip {
    background-color: darkblue;
    font-size: 12px;
  }

Voir aussi leur démo ici: https://github.com/angular/material2/tree/master/src/demo-app/tooltip

N'oubliez pas non plus que si vous utilisez SASS, le conteneur de l'info-bulle se trouve en bas et loin de l'endroit où vous le placez dans le code HTML de votre composant. Par conséquent, ne l'imbriquez pas dans ce composant. Assurez-vous qu'il est autonome, sinon cela ne fonctionnera pas. Cette note s’applique aussi évidemment au commentaire ci-dessus si vous choisissez simplement de remplacer .mat-tooltip

Pour voir les modifications, dans les outils de développement, recherchez la division au bas de la classe "cdk-overlay-container". Puis survolez l'élément. Vous pouvez utiliser les touches fléchées pour naviguer dans l'élément lorsque vous êtes survolé pour confirmer si votre classe est ajoutée.

11
kittycatbytes

Ajouter ng-deep avant le nom de la classe

Essaye ça

::ng-deep .mat-tooltip {
    background: red!important;
}
2
Saurabh Agrawal

ajoutez le code suivant dans votre styles.css pour augmenter la taille de la police, par exemple 12 pixels

CSS

.mat-tooltip {
  font-size: 14px !important;
}

et utilisez matTooltip dans votre tag en tant que.

<p matTooltip="My Tooltip">...<p>
0
Atif Zia

Je n'ai pas d'expérience avec angular mais vous pouvez ajouter une classe ou un identifiant pour div. Ensuite, vous pouvez contrôler avec cette classe ou id avec fichier css.

<div  class="sth" mdTooltip="tooltip text" mdTooltipPosition="above"> <span>Show tooltip</span> </div>

Et 

.sth{
    font-size:20px;
}

en fichier css.

0
G.Acikgoz