问题描述
在AngularJS中,可以使用选择器.md-tooltip
In AngularJS is possible to style tooltips in CSS using the selector .md-tooltip
在Angular 4中使用自定义格式工具提示的方式是什么?
What is the way to have custom format tooltips in Angular 4?
我正在使用Angular 4&材料2.
I am using 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.
推荐答案
如果要自定义工具提示的CSS,则可以使用::ng-deep
.在组件的样式中添加以下样式:
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:
::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
})
然后在组件CSS中不必使用::ng-deep
.
Then in your component css you dont have to use ::ng-deep
.
.mat-tooltip {
/* your own custom styles here */
/* e.g. */
color: yellow;
}
这篇关于自定义Angular Material 2工具提示样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!