在 AngularJS 中，可以使用选择器 .md-tooltip 在 CSS 中设置工具提示样式
在 Angular 4 中自定义格式工具提示的方法是什么？
编辑：
我正在使用 Angular 4 和 Material2。
我如何使用它的一个例子是：
<span mdTooltip='TEST' mdTooltipPosition='right'>TEST</span>
它显示的工具提示很好，除了我不知道如何设置它的样式。
【问题讨论】：
标签： angular angular-material angular-material2
如果你想自定义tooltip的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;
}
【讨论】：
!important ::ng-deep .mat-tooltip { /* your own custom styles here */ /* e.g. */ color: yellow !important; }
你可以看看下面的例子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;
}
【讨论】：
只需在您的输入标签中添加一个matTooltipClass="red-tooltip" 即可。
然后在styles.css中添加这个类的定义
<input type="number" matTooltipClass='red-tooltip'/>
.red-tooltip{
background-color:red;
}
【讨论】：
.red-tooltip{ ...
ViewEncapsulation 设置为None 或没有::ng-deep 伪选择器，它将无法工作。请注意，后者很快就会被删除，因为它可能会鼓励不良的样式做法。
颜色：黄色；不会覆盖您必须添加的类（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;
}
然后它会工作！
【讨论】：
始终使用 matTooltipClass 和自定义类。永远不要直接在材质类上使用 ::ng-deep，永远不要设置封装：ViewEncapsulation.None。 Angular 组件是模块化的，并且有自己的风格。 :ng-deep（或 /deep/ 或 >>> 或他们现在所说的任何东西）和 viewEncapsulation 都将覆盖您可能希望包含在其他组件中的样式。我曾经被这些愚弄过，有时工作并不容易，但这些会导致您严重的布局损坏。
【讨论】：
我们可以使用 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;
}
【讨论】：
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;
}
【讨论】：
这是一个没有 ::ng-deep / ViewEncapsulation.None 的解决方案。有了它，您还可以在相同/不同的组件中使用不同的工具提示，并且每个组件都有自己独立的样式。
首先，在styles.scss中定义
.mat-tooltip.my-tooltip { background-color: blue !important; }然后在带有matTooltip的html组件中使用：
[matTooltipClass]="'my-tooltip'"希望对你有帮助
【讨论】：