web-dev-qa-db-ja.com

カスタマイズAngular Material 2ツールチップスタイル

AngularJSでは、セレクター.md-tooltipを使用してCSSでツールチップをスタイルできます

Angular 4でカスタム形式のツールチップを使用する方法は何ですか？

編集：

私はAngular 4＆Material2を使用しています。

私がそれを使用している方法の例は次のとおりです。

<span mdTooltip='TEST' mdTooltipPosition='right'>TEST</span>

私はそれをスタイルする方法がわからないという事実を除いて、それはかなりうまくツールチップを示しています。

cssangulartooltipangular-material2
13
Nizam

ツールチップの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;
}
26
Faisal

次の例をご覧ください 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;
}
17
Axel Freiria

matTooltipClass="red-tooltip"あなたの入力タグがあります。そして、styles.cssでこのクラスの定義を追加します

<input type="number" matTooltipClass='red-tooltip'/>

.red-tooltip{
       background-color:red;
}
6
sumit

色：黄色; ！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;
}

その後、動作します！

4
Denis Cocca

角度材料ツールチップは、入力プロパティ「matTooltipClass」を公開します

HTMLで

 ` 

        <mat-icon color="primary" matTooltip="test"
                    [matTooltipClass]="{ 'tool-tip': true }"
                    >help</mat-icon>

    `

CSSで

   .tool-tip {
      color: white;
      background-color: red;

    }
0
sai amar

常にmatTooltipClassとカスタムクラスを使用します。マテリアルクラスで:: ng-deepを直接使用しないでください。決してカプセル化を設定しないでください：ViewEncapsulation.None。 Angularコンポーネントはモジュール化され、独自のスタイルを持ちます。：ng-deep（or/deep/or >>>または最近呼ばれるもの）とviewEncapsulationの両方がオーバーライドされます他のコンポーネントに含まれたままにしておきたいスタイル。これらにだまされたことがありますが、簡単な作業ができない場合がありますが、レイアウトに深刻なダメージを与える可能性があります。

0
Alex1994