设置 Angular Material Tooltip 的字体大小答案

【问题标题】：Set font size of Angular Material Tooltip设置 Angular Material Tooltip 的字体大小
【发布时间】：2017-11-19 03:07:01
【问题描述】：

我是 Web 开发的新手，我不知道如何解决以下问题，尽管它可能很容易。

我正在使用 Angular 4 和 Angular Material 来实现这样的工具提示：

<div mdTooltip="tooltip text" mdTooltipPosition="above">
  <span>Show tooltip</span>
</div>

我想让工具提示文本的字体更大。但是，我没有设法在 Angular Material 文档中找到如何做到这一点，也没有在网络上搜索。有谁知道如何做到这一点？谢谢。

【问题讨论】：

@Ploppy 因为有时大公司会做出错误的决定。默认字体大小在标准分辨率屏幕上几乎无法辨认。 PS。在字典中查找指南-您所看到的可能会让您感到惊讶；-)
@Simon_Weaver 我知道这意味着什么，我的意思是，如果您不想实际使用 Material Design，为什么还要使用它？我看到很多人想要完全修改有角材质的东西，例如尝试完全重新设计材质输入，这根本没有任何意义。
@Ploppy 我不认为将字体大小增加一个像素意味着您不再使用 Material Design
@Ploppy 可能是这家伙的老板。那么什么是截止像素尺寸增加仍然被认为是材料设计？求朋友。
@Simon_Weaver 我停在“可能”上，我们不是来争论猜测的。

标签： css angular tooltip angular-material angular-material2

【解决方案1】：

您可以通过在主样式文件中添加.mat-tooltip css 声明并在其中更改字体大小来解决此问题。您需要在字体大小上设置!important，否则它不会显示。

【讨论】：

谢谢，但它在没有设置 !important 的情况下对我有用。
@hamidreza 你能解释一下为什么组件 css 中的 css 更改不起作用，而如果我们将其添加到全局作品中？
@NikhilKumarvats 对不起！我不能。
@NikhilKumarvats 你可能需要考虑用 ng-deep 覆盖它
这在 2020 年 11 月 15 日起不起作用。我所做的只是添加树线 T. Bulford 还添加了:(

【解决方案2】：

根据此处的文档：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定义中使用.mat-tooltip.largerTooltip，那么你不需要输入!important。我更新了代码。
hmm，在我们的 jhispter 应用程序中，在全球范围内，我使用了相同的方法，但在 css 层次结构中你在这里所做的不同......我有.largerToolTip，然后是.mat-tooltip，它至少在 2020 年 9 月的今天运行良好。

【解决方案3】：

您可以使用 css /deep/ 选择器。例如：

/deep/ .mat-tooltip {
  font-size: 14px;
}

那你就不用!important

【讨论】：

你能把 :host 添加到行首吗？ :host /deep/ .mat-tooltip {...} 我想，这可以帮助你。祝你好运！
@GLR - 根据 Angular 版本，您可能需要使用 ::ng-deep .mat-tooltip { font-size: 14px; }
@GLR 你可以阅读这个 - stackoverflow.com/questions/32853924/… 我希望这可以帮助你理解它是如何工作的。
+1。除了允许避免 !important 之外，如果在组件 css 而不是全局 css 中指定，也可以使用。
deep 已弃用

【解决方案4】：

在类名前添加ng-deep

试试这个

::ng-deep .mat-tooltip {
    background: red!important;
}

【讨论】：

ng-deep 已弃用
@GilEpshtain 这是这里所有解决方案中唯一对我有用的东西

【解决方案5】：

我的问题是对 matTooltipClass 使用全局定义的 css 类名（例如 .customname-toolip）不起作用。下面是我的解决方案，需要 !important；在全局 styles.css 文件中设置：

.mat-tooltip {
    font-size: 16px !important;
}

【讨论】：

【解决方案6】：

在您的styles.css 中添加以下代码以增加其字体大小，即12px

CSS

.mat-tooltip {
  font-size: 14px !important;
}

并在标签的 as 中使用 matTooltip。

<p matTooltip="My Tooltip">...<p>

【讨论】：

【解决方案7】：

试试这个方法。它应该可以工作。

test.component.html

<div mdTooltip="tooltip text" mdTooltipPosition="above" matTooltipClass="myTest-tooltip">
  <span>Show tooltip</span>
</div>

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

.myTest-tooltip {
    min-width: 300px;
    background-color: #FC5558;
    font-size: 16px;
}

【讨论】：

【解决方案8】：

使用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;
}

【讨论】：

【解决方案9】：

您可以通过添加自定义类 + 使用 /deep/ 仅为您的组件设置自定义样式，这将仅为您的自定义类应用 CSS 更改，不全球。

例如为图像标签添加自定义工具提示：

<img
   matTooltip="text"
   matTooltipClass="my-custom-class"<----
   src=""/>

在css文件中：

/deep/ .mat-tooltip.my-custom-class {<---
  background: #FFFFFF;
}

【讨论】：

【解决方案10】：

我没有使用 Angular 的经验，但您可以为 div 添加一个类或 id。然后你可以用这个类或用css文件的id来控制。

<div  class="sth" mdTooltip="tooltip text" mdTooltipPosition="above"> <span>Show tooltip</span> </div>

还有

.sth{
    font-size:20px;
}

在 css 文件中。

【讨论】：

不幸的是，这只会改变div元素（'显示工具提示'）内的文本的字体大小，而不是工具提示的文本。
哦，抱歉，我有一个已发布的问题希望对您有所帮助：github.com/angular/material2/issues/3927

【解决方案11】：

把它放在你的组件css中（或者如果你想全局应用它，把它放在主组件css中。注意把它放在你的全局css文件中是行不通的，你必须把它放在主组件css中才能应用它全球）。

::ng-deep .mat-tooltip {
  font-size: 16px;
}

【讨论】：