AngularJSでは、セレクター.md-tooltip
を使用してCSSでツールチップをスタイルできます
Angular 4でカスタム形式のツールチップを使用する方法は何ですか?
編集:
私はAngular 4&Material2を使用しています。
私がそれを使用している方法の例は次のとおりです。
<span mdTooltip='TEST' mdTooltipPosition='right'>TEST</span>
私はそれをスタイルする方法がわからないという事実を除いて、それはかなりうまくツールチップを示しています。
ツールチップのCSSをカスタマイズする場合は、::ng-deep
を使用できます。コンポーネントのスタイルに次のスタイルを追加します。
::ng-deep .mat-tooltip {
/* your own custom styles here */
/* e.g. */
color: yellow;
}
別のオプションは、コンポーネントで View Encapsulation をNoneに設定することです:
@Component({
templateUrl: './my.component.html',
styleUrls: ['./my.component.css'],
encapsulation: ViewEncapsulation.None
})
次に、コンポーネントcssで::ng-deep
を使用する必要はありません。
.mat-tooltip {
/* your own custom styles here */
/* e.g. */
color: yellow;
}
次の例をご覧ください angular/material2 Tooltip Demo
基本的に、次のようにツールチップを設定できます(CSSだけでなく、位置、非表示の遅延、表示の遅延、および無効にするかどうかも定義できます)。
<button #tooltip="mdTooltip"
md-raised-button
color="primary"
[mdTooltip]="message"
[mdTooltipPosition]="position"
[mdTooltipDisabled]="disabled"
[mdTooltipShowDelay]="showDelay"
[mdTooltipHideDelay]="hideDelay"
[mdTooltipClass]="{'red-tooltip': showExtraClass}">
コンポーネントで
position: TooltipPosition = 'below';
message: string = 'Here is the tooltip';
disabled = false;
showDelay = 0;
hideDelay = 1000;
showExtraClass = true;
そして、例としてのCSS:
/deep/ .red-tooltip {
background-color: rgb(255, 128, 128);
color: black;
}
matTooltipClass="red-tooltip"
あなたの入力タグがあります。そして、styles.cssでこのクラスの定義を追加します
<input type="number" matTooltipClass='red-tooltip'/>
.red-tooltip{
background-color:red;
}
色:黄色; !importantを追加する必要があるクラス(mat-tooltip)を上書きしません。
このような:
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() {
}
}
HTMLテンプレート:
<div matTooltip="This is the Tooltip!" matTooltipPosition="below">This text has a tooltip!</div>
CSSテンプレート:
.mat-tooltip {
color: yellow !important;
}
その後、動作します!
角度材料ツールチップは、入力プロパティ「matTooltipClass」を公開します
HTMLで
`
<mat-icon color="primary" matTooltip="test"
[matTooltipClass]="{ 'tool-tip': true }"
>help</mat-icon>
`
CSSで
.tool-tip {
color: white;
background-color: red;
}
常にmatTooltipClassとカスタムクラスを使用します。マテリアルクラスで:: ng-deepを直接使用しないでください。決してカプセル化を設定しないでください:ViewEncapsulation.None。 Angularコンポーネントはモジュール化され、独自のスタイルを持ちます。:ng-deep(or/deep/or >>>または最近呼ばれるもの)とviewEncapsulationの両方がオーバーライドされます他のコンポーネントに含まれたままにしておきたいスタイル。これらにだまされたことがありますが、簡単な作業ができない場合がありますが、レイアウトに深刻なダメージを与える可能性があります。