CSS 设置 Angular Material Tooltip 的字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44587532/
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
Set font size of Angular Material Tooltip
提问by GLR
I am very new to web development, and I cannot figure out how to solve the following issue, although it may be very easy.
我对 Web 开发很陌生，我无法弄清楚如何解决以下问题，尽管它可能很容易。
I am using Angular 4 and Angular Material to implement tooltips like this:
我正在使用 Angular 4 和 Angular Material 来实现这样的工具提示：
<div mdTooltip="tooltip text" mdTooltipPosition="above">
<span>Show tooltip</span>
</div>
I would like to make the font size of the tooltip text bigger. However, I did not manage to find how to do this in the Angular Material documentation, neither searching in the web. Does anyone have any idea on how to do this? Thanks.
我想让工具提示文本的字体大小更大。但是，我没有在 Angular Material 文档中找到如何做到这一点，也没有在网上搜索。有没有人知道如何做到这一点？谢谢。
回答by Dean Chalk
You can fix this by adding a .mat-tooltipcss declaration in you main styles file and change the font size there. You need to set !importanton the font size otherwise it won't show up.
您可以通过.mat-tooltip在主样式文件中添加css 声明并在那里更改字体大小来解决此问题。您需要设置!important字体大小，否则它不会显示。
回答by kittycatbytes
Per the documentation here: https://material.angular.io/components/tooltip/api
根据此处的文档：https: //material.angular.io/components/tooltip/api
And the spec: https://github.com/angular/material2/blob/master/src/lib/tooltip/tooltip.spec.ts
和规范：https: //github.com/angular/material2/blob/master/src/lib/tooltip/tooltip.spec.ts
You can set the property 'matTooltipClass', as follows:
您可以设置属性“matTooltipClass”，如下所示：
<div matTooltip="tooltip text" matTooltipPosition="above" matTooltipClass="tooltip">
<span>Show tooltip</span>
</div>
Then in your CSS (global - not for the component):
然后在您的 CSS（全局 - 不适用于组件）中：
.mat-tooltip.tooltip {
background-color: darkblue;
font-size: 12px;
}
Also see their demo here: https://github.com/angular/material2/tree/master/src/demo-app/tooltip
也可以在这里查看他们的演示：https: //github.com/angular/material2/tree/master/src/demo-app/tooltip
Also keep in mind if you are using SASS, that the container for the tooltip is at the bottom and nowhere near where you are placing it in your component's HTML, so do not nest it in that component. Make sure it is standalone, otherwise it will not work. This note applies as well obviously to the comment above if you just choose to override .mat-tooltip
还要记住，如果您使用的是 SASS，则工具提示的容器位于底部，并且离您在组件 HTML 中放置它的位置不远，因此不要将其嵌套在该组件中。确保它是独立的，否则它将无法工作。如果您只是选择覆盖 .mat-tooltip，则此注释显然也适用于上面的注释
To see the changes, in developer tools, find the div at the bottom with the class "cdk-overlay-container". Then hover over the element. You can use your arrow keys to navigate into the element while you are hovered over to confirm whether your class is being added.
要查看更改，请在开发人员工具中找到底部带有“cdk-overlay-container”类的 div。然后将鼠标悬停在元素上。当您将鼠标悬停在上方时，您可以使用箭头键导航到元素中，以确认是否正在添加您的类。
回答by Serhii Kononov
You can use css /deep/selector.
For example:
您可以使用 css/deep/选择器。例如：
/deep/ .mat-tooltip {
font-size: 14px;
}
Then you do not have to use !important
那么你不必使用 !important
回答by Saurabh Agrawal
Add ng-deepbefore class name
ng-deep在类名前添加
Try this
尝试这个
::ng-deep .mat-tooltip {
background: red!important;
}
回答by Atif Zia
add following code in your styles.css to increase its font size i.e. 12px
在你的styles.css 中添加以下代码以增加其字体大小，即 12px
CSS
CSS
.mat-tooltip {
font-size: 14px !important;
}
and use matTooltipin your tag's as.
并在标签的 as 中使用matTooltip。
<p matTooltip="My Tooltip">...<p>
回答by vinsinraw
Try this way. It should work.
试试这个方法。它应该工作。
test.component.html
测试组件.html
<div mdTooltip="tooltip text" mdTooltipPosition="above" matTooltipClass="myTest-tooltip">
<span>Show tooltip</span>
</div>
test.component.ts
test.component.ts
@Component({
selector: 'test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss'],
encapsulation: ViewEncapsulation.None,
/*
styles: [`
.myTest-tooltip {
min-width: 300px;
background-color: #FC5558;
font-size: 16px;
}
`]*/
})
test.component.scss
测试组件.scss
.myTest-tooltip {
min-width: 300px;
background-color: #FC5558;
font-size: 16px;
}
回答by T. Bulford
My problem was that using a globally defined css class-name such as .customname-toolip for matTooltipClass was NOT working. My solution below, and the !important was needed; set in the global styles.css file:
我的问题是使用全局定义的 css 类名（例如 .customname-toolip for matTooltipClass 不起作用）。我的解决方案如下，需要 !important ；在全局 style.css 文件中设置：
.mat-tooltip {
font-size: 16px !important;
}
}
回答by G.Acikgoz
I dont have an experience with angular but you may add a class or id for div. Then you may control with this class or id with css file.
我没有 angular 的经验，但您可以为 div 添加一个类或 id。然后您可以使用此类或 id 与 css 文件进行控制。
<div class="sth" mdTooltip="tooltip text" mdTooltipPosition="above"> <span>Show tooltip</span> </div>
And
和
.sth{
font-size:20px;
}
in css file.
在 css 文件中。
