设置 Angular Material 工具提示的字体大小

Question

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

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

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

我想把工具提示文本的字体调大一些。但是，我没有设法在 Angular Material 文档中找到如何执行此操作，也没有在网上搜索。有谁知道如何做到这一点？谢谢

Answer 1

我没有使用 angular 的经验，但您可以为 div 添加 class 或 ID。然后你可以用这个 class 或者 id 控制 css 文件。

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

和

.sth{
    font-size:20px;
}

在 css 文件中。

Answer 2

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

Answer 3

根据此处的文档：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

，则此注释显然也适用于上面的评论

要查看更改，请在开发人员工具中找到底部带有 class "cdk-overlay-container" 的 div。然后将鼠标悬停在元素上。当您将鼠标悬停在元素上时，您可以使用箭头键导航到该元素以确认是否正在添加您的 class。

Answer 4

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

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

那你就不用!important

Answer 5

在class名字前加ng-deep

试试这个

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

Answer 6

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

CSS

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

并在您的标签中使用 matTooltip。

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

Answer 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;
}

Answer 8

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

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

Answer 9

使用 matTooltipClass 在工具提示上应用您的自定义 class

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

Answer 10

将其放入您的组件 css（或主组件 css，如果您想全局应用它。请注意，将其放入您的全局 css 文件将不起作用，你必须把它放在 home 组件中 css 才能全局应用它）。

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

Answer 11

您可以通过添加自定义 class + 使用 /deep/ 来仅为您的组件设置自定义样式，这将仅应用 css 更改 [=21] =] 为您的自定义 class 和 而不是 全局。

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

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

并在 css 文件中：

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

设置 Angular Material 工具提示的字体大小

Set font size of Angular Material Tooltip

css

tooltip

angular-material

angular-material2

angular