Question

我是网络开发的新手，我无法弄清楚如何解决以下问题，虽然这可能很容易。

我正在使用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

，本说明也适用于上述评论

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

Answer 2

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

Answer 3

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

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

然后您不必使用!important

Answer 4

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

CSS

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

并在标签中使用 matTooltip 。

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

Answer 5

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

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

}

Answer 6

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

Answer 7

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

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

并且

.sth{
    font-size:20px;
}

在css文件中。

Answer 8

尝试这种方式。应该可以。

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

设置Angular Material Tooltip的字体大小

8 个答案: