我对网络开发非常陌生，我不知道如何解决以下问题，尽管它可能很简单。
我正在使用 Angular 4 和 Angular Material 来实现这样的工具提示：
<div mdTooltip="tooltip text" mdTooltipPosition="above">
<span>Show tooltip</span>
</div>
我想增大工具提示文本的字体大小。但是，我没有在 Angular Material 文档中找到如何执行此操作，也没有在网络中搜索。有谁知道如何做到这一点？谢谢。
您可以通过在主样式文件中添加
.mat-tooltip!important根据此处的文档：https://material.angular.io/components/tooltip/api
规范：https://github.com/angular/material2/blob/master/src/lib/tooltip/tooltip.spec.ts
您可以设置属性“matTooltipClass”，如下所示：
<div matTooltip="tooltip text" matTooltipPosition="above" matTooltipClass="tooltip">
<span>Show tooltip</span>
</div>
然后在你的 CSS 中（全局 - 不适用于组件）：
.mat-tooltip.tooltip {
background-color: darkblue;
font-size: 12px;
}
还可以在这里查看他们的演示：https://github.com/angular/material2/tree/master/src/demo-app/tooltip
还要记住，如果您使用 SASS，工具提示的容器位于底部，并且离您在组件的 HTML 中放置它的位置不远，因此不要将其嵌套在该组件中。确保它是独立的，否则它将无法工作。如果您只是选择覆盖 .mat-tooltip
，则此注释显然也适用于上面的评论要查看更改，请在开发人员工具中找到底部带有“cdk-overlay-container”类的 div。然后将鼠标悬停在该元素上。当您将鼠标悬停在该元素上时，您可以使用箭头键导航到该元素，以确认是否正在添加您的类。
您可以使用 css
/deep//deep/ .mat-tooltip {
font-size: 14px;
}
那么你就不必使用
!important在类名前添加
ng-deep试试这个
::ng-deep .mat-tooltip {
background: red!important;
}
在 v15 中，您可以更改 css 变量（在 styles.scss 中）
body{
.mat-mdc-tooltip{
--mdc-plain-tooltip-container-color: #616161;
--mdc-plain-tooltip-supporting-text-color: white;
--mdc-plain-tooltip-supporting-text-font: Roboto, sans-serif;
--mdc-plain-tooltip-supporting-text-size: 12px;
--mdc-plain-tooltip-supporting-text-weight: 400;
--mdc-plain-tooltip-supporting-text-tracking: 0.0333333333em;
line-height: 12px;
}
}
我的问题是，使用全局定义的 css 类名（例如 .customname-toolip ）作为 matTooltipClass 不起作用。我的解决方案如下，并且需要 !important;在全局 styles.css 文件中设置：
.mat-tooltip {
font-size: 16px !important;
}
在 styles.css 中添加以下代码以增加其字体大小，即 12px
CSS
.mat-tooltip {
font-size: 14px !important;
}
并在标签的 as 中使用 matTooltip。
<p matTooltip="My Tooltip">...<p>
试试这个方法。应该可以。
test.component.html
<div mdTooltip="tooltip text" mdTooltipPosition="above" matTooltipClass="myTest-tooltip">
<span>Show tooltip</span>
</div>
测试.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
.myTest-tooltip {
min-width: 300px;
background-color: #FC5558;
font-size: 16px;
}
使用
matTooltipClass<button mat-raised-button
matTooltip="Adding a class to the tooltip container"
matTooltipClass="custom-tooltip">
Custom tooltip
</button>
在组件 style.scss 文件中添加您的样式
.custom-tooltip {
font-size: 20px !important;
}
您可以通过添加自定义类+使用
/deep/例如为图像标签添加自定义工具提示：
<img
matTooltip="text"
matTooltipClass="my-custom-class"<----
src=""/>
在CSS文件中：
/deep/ .mat-tooltip.my-custom-class {<---
background: #FFFFFF;
}
对于较新的版本（我使用的是 v15），使用特定的类声明（在 html 标记中）只是大量的重复和重复。
我想要一种全球性的方式。
.mat-mdc-tooltip {
--mdc-plain-tooltip-container-color: #fff;
--mdc-plain-tooltip-supporting-text-font: "Baloo 2", sans-serif;
--mdc-plain-tooltip-supporting-text-size: 14px;
--mdc-plain-tooltip-supporting-text-weight: 100;
--mdc-plain-tooltip-supporting-text-color: #000;
}
.mdc-tooltip__surface {
letter-spacing: -0.5px!important;
border: 1px solid #333!important;
}
这在整个网站上都运行得很好。实际上我有它在我的核心 SCSS 文件中。
我没有 Angular 的经验，但你可以为 div 添加类或 id。然后你可以用css文件来控制这个类或id。
<div class="sth" mdTooltip="tooltip text" mdTooltipPosition="above"> <span>Show tooltip</span> </div>
还有
.sth{
font-size:20px;
}
在 css 文件中。
将其放入您的组件CSS中（如果您想全局应用它，则将其放入主页组件CSS中。请注意，将其放入您的全局CSS文件中是行不通的，您必须将其放入主页组件CSS中才能全局应用它） .
::ng-deep .mat-tooltip {
font-size: 16px;
}