web-dev-qa-db-de.com

Legt die Schriftgröße von fest Angular Material-Tooltip

Ich bin sehr neu in der Webentwicklung und kann nicht herausfinden, wie ich das folgende Problem lösen kann, auch wenn es sehr einfach sein kann.

Ich verwende Angular 4 und Angular Material, um Tooltips wie folgt zu implementieren:

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

Ich möchte die Schriftgröße des Tooltips erhöhen. In der Angular -Dokumentation ist es mir jedoch nicht gelungen, eine Anleitung zu finden, noch im Web zu suchen. Hat jemand eine Idee, wie das geht? Vielen Dank.

cssangulartooltipangular-materialangular-material2
8
GLR

Sie können dies beheben, indem Sie in Ihrer Hauptstildatei eine .mat-tooltip css -Deklaration hinzufügen und die Schriftgröße dort ändern. Sie müssen !important auf die Schriftgröße einstellen, sonst wird sie nicht angezeigt.

13
Dean Chalk

Sie können css /deep/ selector verwenden. Zum Beispiel:

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

Dann müssen Sie !important nicht verwenden

11
Serhii Kononov

Per Dokumentation hier: https://material.angular.io/components/tooltip/api

Und die Spezifikation: https://github.com/angular/material2/blob/master/src/lib/tooltip/tooltip.spec.ts

Sie können die Eigenschaft 'matTooltipClass' wie folgt festlegen:

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

Dann in Ihrem CSS (global - nicht für die Komponente):

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

Die Demo finden Sie auch hier: https://github.com/angular/material2/tree/master/src/demo-app/tooltip

Beachten Sie bei der Verwendung von SASS auch, dass sich der Container für die QuickInfo unten und nicht in der Nähe der Position befindet, an der Sie ihn in den HTML-Code Ihrer Komponente einfügen. Verschachteln Sie ihn daher nicht in dieser Komponente. Stellen Sie sicher, dass es Standalone ist, andernfalls funktioniert es nicht. Dieser Hinweis gilt natürlich auch für den obigen Kommentar, wenn Sie einfach .mat-tooltip überschreiben möchten

Um die Änderungen zu sehen, suchen Sie in den Entwicklerwerkzeugen das div mit der Klasse "cdk-overlay-container" unten. Dann schweben Sie über dem Element. Sie können mit den Pfeiltasten in das Element navigieren, während Sie den Mauszeiger darüber bewegen, um zu bestätigen, ob Ihre Klasse hinzugefügt wird.

11
kittycatbytes

Fügen Sie ng-deep vor dem Klassennamen hinzu

Versuche dies

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

fügen Sie in Ihre styles.css folgenden Code hinzu, um die Schriftgröße zu erhöhen, d. h. 12px

CSS

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

und verwenden Sie matTooltip in Ihren Tags als.

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

Ich habe keine Erfahrung mit eckig, aber Sie können eine Klasse oder eine ID für div hinzufügen. Dann können Sie mit dieser Klasse oder ID mit der CSS-Datei steuern.

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

Und 

.sth{
    font-size:20px;
}

in css datei.

0
G.Acikgoz