Définir la police la taille Angulaire du Matériel info-bulle

Je suis très nouveau pour le développement web, et je ne parviens pas à trouver comment résoudre le problème suivant, bien qu'il peut être très facile.

Je suis Angulaire à l'aide de 4 et de la quantité de Matériau à mettre en œuvre les info-bulles comme ceci:

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

Je voudrais faire la taille de la police de l'info-bulle de texte plus grand. Cependant, je n'ai pas réussi à trouver comment faire cela dans l'angle de Matériel de documentation, ni de chercher dans le web. Quelqu'un a une idée sur comment faire? Merci.

  • Si vous ne voulez pas suivre les lignes directrices concernant les matières, pourquoi utilisez-vous Angulaire du Matériel?
  • parce que parfois, les grandes entreprises prennent de mauvaises décisions. La taille de police par défaut est à peine lisible sur un écran de résolution. PS. rechercher la ligne directrice dans le dictionnaire - ce que vous voyez pourrait vous surprendre 😉
  • Je sais ce que cela signifie, ce que je voulais dire, pourquoi utiliser la Conception de Matériel si vous ne voulez pas l'utiliser? Je vois beaucoup de gens qui veulent modifier des choses complètement angulaire du matériel, comme par exemple essayer de redessiner complètement les matières premières et il ne fait aucun sens du tout.
  • Je ne pense pas que l'augmentation de la taille de la police par un pixel signifie que vous n'êtes pas à l'aide de la Conception de Matériel plus
  • qui a dit que c'était par un pixel?
  • probablement ce mec est le patron. Alors quelle serait la fréquence de coupure taille de pixel de l'augmentation de toujours être considéré comme la Conception de Matériel? Demander pour un ami.
  • Je me suis arrêté à "probablement", nous ne sommes pas ici pour argumenter sur des suppositions.

InformationsquelleAutor GLR | 2017-06-16
  1. 19

    Vous pouvez résoudre ce problème en ajoutant un .mat-tooltip css déclaration dans les principaux styles de fichier et modifier la taille de la police là. Vous devez définir !important sur la taille de la police, sinon ça ne se présentent pas.

    • Merci, mais cela a fonctionné pour moi, sans réglage !important.
    InformationsquelleAutor Dean Chalk
  2. 20

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

    Et le spec: 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 (mondial, pas pour le composant:

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

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

    Également garder à l'esprit si vous êtes à l'aide de SASS, que le conteneur pour l'info-bulle est en bas et nulle part près de l'endroit où vous placez dans votre composant HTML, afin de ne pas imbriquer dans ce composant. Assurez-vous qu'il est autonome, sinon il ne fonctionnera pas. Cette remarque s'applique aussi bien évidemment pour le commentaire ci-dessus, si vous venez de choisir de les écraser .mat-info-bulle

    Pour voir les changements dans les outils de développement, trouver le div en bas avec la classe "cdk-overlay-container". Ensuite, passez la souris sur l'élément. Vous pouvez utiliser les flèches de votre clavier pour naviguer dans l'élément tout en vous planait au-dessus de confirmer si votre classe est ajoutée.

    • Si vous utilisez .mat-tooltip.largerTooltip dans le css définition, alors vous n'avez pas besoin de mettre !important. J'ai mis à jour le code.
    InformationsquelleAutor kittycatbytes
  3. 12

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

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

    Alors vous n'avez pas à utiliser !important

    • Cela ne fonctionne pas pour moi en utilisant la norme CSS.
    • Pouvez-vous ajouter :host au début de la ligne? :host /deep/ .mat-infobulle {...} je pense que cela peut vous aider. Bonne chance!
    • Cela ne fonctionne pas non plus 🙁 je vous Remercie.
    • selon Angulaire de la version que vous pouvez avoir besoin d'utiliser ::ng-profonde .mat-infobulle { font-size: 14px; }
    • Avec votre dernier conseil, il fonctionne parfaitement. Merci!
    • Vous pouvez lire ce - stackoverflow.com/questions/32853924/..., je l'espère, cela vous aider à comprendre comment il fonctionne.
    • Génial qui travaillent bien
    • +1. En plus de permettre d'éviter les !important, est fonctionne également si spécifié dans le composant css plutôt que global css.
    • profonde est obsolète

    InformationsquelleAutor Serhii Kononov
  4. 2

    Ajouter ng-deep avant le nom de la classe

    Essayer cette

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

    ajouter le code suivant dans votre styles.css pour augmenter sa taille de police, c'est à dire 12px

    CSS

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

    et l'utilisation matTooltip dans votre balise est comme.

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

    Je n'ai pas une expérience avec anguleux, mais vous pouvez ajouter une classe ou l'id de la div. Ensuite, vous pouvez contrôler avec cette classe ou l'id avec le fichier css.

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

    Et 

    .sth{
    font-size:20px;
}

    dans le fichier css.

    • Malheureusement, cela ne change la taille de police du texte qui est à l'intérieur de la div élément ("Afficher les info-bulle"), mais pas le texte de l'info-bulle.
    • Oh désolé, j'ai posté un problème pour vous, j'espère que cela aide : github.com/angular/material2/issues/3927
    InformationsquelleAutor G.Acikgoz