web-dev-qa-db-ja.com

フォントサイズをAngular Material Tooltipに設定します

私はWeb開発を始めたばかりで、次の問題を解決する方法はわかりませんが、非常に簡単かもしれません。

私はAngular 4およびAngular=を使用して、このようなツールチップを実装します。

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

ツールチップテキストのフォントサイズを大きくしたいと思います。しかし、私はAngular Material documentationでこれを行う方法を見つけることができませんでした。Webで検索することもできません。これを行う方法についてのアイデアはありますか？ありがとう。

cssangulartooltipangular-materialangular-material2
18
GLR

これを修正するには、メインスタイルファイルに.mat-tooltip css宣言を追加し、そこでフォントサイズを変更します。フォントサイズに!importantを設定する必要があります。そうしないと表示されません。

20
Dean Chalk

ここのドキュメントごとに： https://material.angular.io/components/tooltip/api

そして仕様： https://github.com/angular/material2/blob/master/src/lib/tooltip/tooltip.spec.ts

次のように、プロパティ 'matTooltipClass'を設定できます。

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

次に、CSSで（グローバル-コンポーネント用ではありません）：

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

こちらのデモもご覧ください： https://github.com/angular/material2/tree/master/src/demo-app/tooltip

また、SASSを使用している場合は、ツールチップのコンテナーが下部にあり、コンポーネントのHTMLでツールチップを配置する場所の近くにないため、そのコンポーネントに入れないでください。スタンドアロンであることを確認してください。そうでない場合は動作しません。このメモは、.mat-tooltipをオーバーライドすることを選択した場合、上記のコメントにも明らかに適用されます

変更を確認するには、開発者ツールで、クラス「cdk-overlay-container」を持つ一番下のdivを見つけます。次に、要素にカーソルを合わせます。ホバーしている間に矢印キーを使用して要素に移動し、クラスが追加されているかどうかを確認できます。

21
kittycatbytes

Css /deep/セレクターを使用できます。例えば：

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

その場合、!importantを使用する必要はありません

13
Serhii Kononov

クラス名の前にng-deepを追加します

これを試して

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

styles.cssに次のコードを追加して、フォントサイズを増やします（例：12px）

CSS

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

タグのasでmatTooltipを使用します。

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

angularの経験はありませんが、divのクラスまたはIDを追加できます。その後、このクラスまたはIDをcssファイルで制御できます。

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

そして

.sth{
    font-size:20px;
}

cssファイル。

0
G.Acikgoz