CSS 自定义 Angular Material 2 工具提示样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45777232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Customize Angular Material 2 Tooltip styles
提问by Nizam
In AngularJS is possible to style tooltips in CSS using the selector .md-tooltip
在 AngularJS 中，可以使用选择器在 CSS 中设置工具提示的样式 .md-tooltip
What is the way to have custom format tooltips in Angular 4?
在 Angular 4 中使用自定义格式工具提示的方法是什么？
EDIT:
编辑：
I am using Angular 4 & Material2.
我正在使用 Angular 4 和 Material2。
An example of how I am using it is:
我如何使用它的一个例子是：
<span mdTooltip='TEST' mdTooltipPosition='right'>TEST</span>
It shows the tooltip pretty fine, except the fact that I don′t know how to style it.
它显示的工具提示非常好，除了我不知道如何设置它的样式。
回答by Faisal
If you want to customize the css of the tooltip, then you can use ::ng-deep. Add the following styles in your component's styles:
如果你想自定义工具提示的 css，那么你可以使用::ng-deep. 在组件的样式中添加以下样式：
::ng-deep .mat-tooltip {
/* your own custom styles here */
/* e.g. */
color: yellow;
}
Another option is to set the?View Encapsulation?to None in your component:
另一种选择是设置？在您的组件中查看封装？到无：
@Component({
templateUrl: './my.component.html',
styleUrls: ['./my.component.css'],
encapsulation: ViewEncapsulation.None
})
Then in your component css you dont have to use ::ng-deep.
然后在您的组件 css 中，您不必使用::ng-deep.
.mat-tooltip {
/* your own custom styles here */
/* e.g. */
color: yellow;
}
回答by Axel Freiria
You could take a look into the following example angular/material2 Tooltip Demo
您可以查看以下示例angular/material2 Tooltip Demo
Basically you could set up the tooltip as follows (you could define not only the css but also the position, the hide delay, the show delay and if it is disable or not):
基本上，您可以按如下方式设置工具提示（您不仅可以定义 css，还可以定义位置、隐藏延迟、显示延迟以及是否禁用）：
<button #tooltip="mdTooltip"
md-raised-button
color="primary"
[mdTooltip]="message"
[mdTooltipPosition]="position"
[mdTooltipDisabled]="disabled"
[mdTooltipShowDelay]="showDelay"
[mdTooltipHideDelay]="hideDelay"
[mdTooltipClass]="{'red-tooltip': showExtraClass}">
In your component then
然后在您的组件中
position: TooltipPosition = 'below';
message: string = 'Here is the tooltip';
disabled = false;
showDelay = 0;
hideDelay = 1000;
showExtraClass = true;
And the css as example:
以 css 为例：
/deep/ .red-tooltip {
background-color: rgb(255, 128, 128);
color: black;
}
回答by sumit
Simply add a matTooltipClass="red-tooltip"in your input tag may be.
And then in styles.css add the definition for this class
只需matTooltipClass="red-tooltip"在您的输入标签中添加一个即可。然后在styles.css中添加这个类的定义
<input type="number" matTooltipClass='red-tooltip'/>
.red-tooltip{
background-color:red;
}
回答by Denis Cocca
color: yellow; does not overwrite the class (mat-tooltip) you have to add !important;
颜色：黄色；不会覆盖您必须添加的类（mat-tooltip）！important;
like this:
像这样：
XX.component.ts:
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 Template:
HTML模板：
<div matTooltip="This is the Tooltip!" matTooltipPosition="below">This text has a tooltip!</div>
CSS Template:
CSS模板：
.mat-tooltip {
color: yellow !important;
}
then it will work !
那么它会起作用！
回答by sai amar
Angular Material tooltip exposes input property 'matTooltipClass'
Angular Material 工具提示公开输入属性“matTooltipClass”
So in the HTML
所以在 HTML
`
<mat-icon color="primary" matTooltip="test"
[matTooltipClass]="{ 'tool-tip': true }"
>help</mat-icon>
`
In the CSS
在 CSS 中
.tool-tip {
color: white;
background-color: red;
}
回答by Alex1994
Always use the matTooltipClass and a custom class. Never use ::ng-deep directly on a material class and NEVER, NEVER set encapsulation: ViewEncapsulation.None. Angular components are made to be modular and have their own style. Both :ng-deep(or /deep/ or >>> or whatever they call it these days) and viewEncapsulation are going to override styles that you might want to keep contained in other components. I was fooled once by these, there is no easy work sometimes but these can cause you serious layout damage.
始终使用 matTooltipClass 和自定义类。永远不要直接在材质类上使用 ::ng-deep，永远不要设置封装：ViewEncapsulation.None。Angular 组件是模块化的，有自己的风格。:ng-deep（或 /deep/ 或 >>> 或他们现在称之为的任何东西）和 viewEncapsulation 都将覆盖您可能希望保留在其他组件中的样式。我曾经被这些愚弄过，有时没有简单的工作，但这些会导致严重的布局损坏。
