自定义 Angular Material 2 种工具提示样式

Question

在 AngularJS 中可以使用选择器 .md-tooltip

在 CSS 中设置工具提示的样式

在 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

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

那就可以了！

Answer 4

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

的定义

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

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

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

    }

Answer 6

始终使用 matTooltipClass 和自定义 class。切勿直接在 material class 上使用 ::ng-deep，切勿设置封装：ViewEncapsulation.None。 Angular 组件被设计成模块化的并且有自己的风格。 :ng-deep（或 /deep/ 或 >>> 或如今他们如何称呼它）和 viewEncapsulation 都将覆盖您可能希望包含在其他组件中的样式。我被这些骗过一次，有时候工作并不容易，但这些会导致你严重的布局损坏。

Answer 7

我们可以使用matTooltipClass

在HTML

<button mat-icon-button matTooltip="Download" matTooltipPosition="right" matTooltipClass="tooltipStyle">
  <mat-icon>download</mat-icon>
</button>

在CSS

.mat-tooltip.tooltipStyle {
    font-size: 11px;
    color: red;
}

Answer 8

这是一个没有 ::ng-deep / ViewEncapsulation.None 的解决方案。有了它，您还可以在相同/不同的组件中使用不同的工具提示，每个组件都有自己独立的样式。

Firstly, in styles.scss define
.mat-tooltip.my-tooltip
{
background-color: blue !important;
}
Then in the html component with matTooltip use:
[matTooltipClass]="'my-tooltip'"
I hope this helps

自定义 Angular Material 2 种工具提示样式

Customize Angular Material 2 Tooltip styles

angular-material

angular-material2

angular