設定的角度材質工具提示

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