it-swarm.com.ru

Настройка Angular Стили всплывающей подсказки к материалу 2

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

Как создать всплывающую подсказку в Angular 4?


EDIT:

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

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

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

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

8
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;
}
17
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;
}
10
Axel Freiria

цвет: желтый; не переписывает класс (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;
}

тогда это будет работать!

2
Denis Cocca

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

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

.red-color{
       background-color:red;
}
0
sumit