设置Angular Material Tooltip的字体大小

Question

我对Web开发很陌生,我无法弄清楚如何解决以下问题,尽管它可能很容易.

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

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

我想使工具提示文本的字体大小更大.但是,我没有设法在Angular Material文档中找到如何执行此操作,也没有在Web中搜索.有没有人知道如何做到这一点？谢谢.

Answer 1

根据此处的文档: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,那么这个注释显然适用于上面的注释

要查看更改,请在开发人员工具中找到底部的d​​iv,其中包含"cdk-overlay-container"类.然后将鼠标悬停在元素上.您可以在悬停时使用箭头键导航到元素,以确认是否正在添加您的课程.

Answer 2

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

Answer 3

您可以使用css /deep/选择器.例如:

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

那你就不用了 !important

Answer 4

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

Answer 5

ng-deep在类名前添加

尝试这个

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

Answer 6

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

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