设定的角度材质工具提示

Question

的字体大小，我很新的Web开发，我无法弄清楚如何解决以下问题，尽管它可能是很容易的。

我使用角4角和材料来实现这样的提示：

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

我想作提示文本更大的字体大小。但是，我没有设法找到如何在Angular Material文档中做到这一点，既没有在网上搜索。有没有人有任何想法如何做到这一点？谢谢。

Answer 1

您可以在您主样式文件中添加.mat-tooltip CSS声明解决这个问题，改变字体大小那里。您需要设置!important上的字体大小，否则它不会显示出来。

Answer 2

我没有带角的经验，但你可以添加一个class和id的DIV。然后你可以用这个类或id用css文件来控制。

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

而且

.sth{ 
    font-size:20px; 
} 

在css文件

。

Answer 3

每文档浏览：https://material.angular.io/components/tooltip/api

而且规格：https://github.com/angular/material2/blob/master/src/lib/tooltip/tooltip.spec.ts

您可以设置属性 'mdTooltipClass'，具体如下：

<div mdTooltip="tooltip text" mdTooltipPosition="'above'" [mdTooltipClass]="'tooltip'"> 
    <span>Show tooltip</span> 
</div> 

然后在你的CSS：

.tooltip{ 
    background-color: darkblue !important; 
    font-size:12px !important; 
    } 

而且在这里看到他们的演示：https://github.com/angular/material2/tree/master/src/demo-app/tooltip

另外请记住，如果您使用的是SASS，工具提示的容器位于底部且远不到您将组件放入组件的HTML中的位置，请不要将其嵌套到该组件中。确保它是独立的，否则它将无法工作。如果您只是选择覆盖此注释，则此说明显然也适用于上述注释.mat-tooltip

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

Answer 4

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

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

那么你不必使用!important