自定义 Angular Material 2 工具提示样式 [英] Customize Angular Material 2 Tooltip styles

问题描述

在 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.

推荐答案

如果你想自定义tooltip的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;
}

另一个选项是在您的组件中将 View Encapsulation 设置为 None:

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 工具提示样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！