自定义角度材质2工具提示样式

Question

在AngularJS中,可以使用选择器在CSS中设置工具提示的样式 .md-tooltip

在Angular 4中使用自定义格式工具提示的方法是什么？

---

编辑:

我正在使用Angular 4和Material2.

我如何使用它的一个例子是:

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

它显示工具提示非常好,除了我不知道如何设计它的事实.

Answer 1

如果要自定义工具提示的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;
}

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

Answer 3

颜色：黄色；不会覆盖您必须添加的类（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;
}

那么它会起作用！

Answer 4

只需matTooltipClass="red-tooltip"在您的输入标签中添加一个即可。然后在styles.css中添加此类的定义

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

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

Answer 5

始终使用 matTooltipClass 和自定义类。永远不要直接在材质类上使用 ::ng-deep 并且永远不要设置封装：ViewEncapsulation.None。Angular 组件是模块化的，有自己的风格。:ng-deep（或 /deep/ 或 >>> 或他们现在称之为的任何东西）和 viewEncapsulation 都将覆盖您可能希望保留在其他组件中的样式。我曾经被这些愚弄过，有时没有简单的工作，但这些会导致严重的布局损坏。