Настроить Angular Материал 2 Типы подсказок

В AngularJS можно создавать подсказки в CSS с помощью селектора .md-tooltip

Каким образом можно настраивать всплывающие подсказки в формате Angular 4?

EDIT:

Я использую Angular 4 и Material2.

Пример того, как я его использую:

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

Это показывает всплывающую подсказку очень хорошо, за исключением того, что я не знаю, как ее стилизовать.

Ответы

Ответ 1

Если вы хотите настроить css всплывающей подсказки, вы можете использовать ::ng-deep. Добавьте в стили ваших компонентов следующие стили:

::ng-deep .mat-tooltip {
    /* your own custom styles here */ 
    /* e.g. */
    color: yellow;
}

Другой вариант - установить Просмотр инкапсуляции на 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;
}

Ответ 2

Вы можете взглянуть на следующий пример 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;
}

Ответ 3

Просто добавьте matTooltipClass="red-tooltip" во входной тег. А затем в styles.css добавить определение для этого класса

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

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

Ответ 4

цвет: желтый; не перезаписывает класс (mat-tooltip), который вы должны добавить! important;

вот так:

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;
}

тогда это сработает!

Ответ 5

Подсказка Angular Material предоставляет входное свойство 'matTooltipClass'

Так в HTML

 ' 

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

    '

В CSS

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

    }

Ответ 6

Всегда используйте matTooltipClass и пользовательский класс. Никогда не используйте :: ng-deep непосредственно для класса материала и НИКОГДА, НИКОГДА не устанавливайте инкапсуляцию: ViewEncapsulation.None. Angular компоненты выполнены модульными и имеют собственный стиль. Оба: ng-deep (или /deep/или >>> или как их там называют в наши дни) и viewEncapsulation будут переопределять стили, которые вы, возможно, захотите сохранить содержащимися в других компонентах. Однажды меня одурачили, иногда нелегкой работы, но это может привести к серьезному повреждению макета.