Установить размер шрифта подголовника с угловым материалом

Я очень новичок в веб-разработке, и я не могу понять, как решить следующую проблему, хотя это может быть очень легко.

Я использую Angular 4 и Angular Material для реализации всплывающих подсказок вроде этого:

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

Я хотел бы увеличить размер шрифта текста всплывающей подсказки. Однако мне не удалось найти, как это сделать в документации по угловому материалу, ни в Интернете, ни в Интернете. Кто-нибудь знает, как это сделать? Благодарю.

Ответ 1

Вы можете исправить это, добавив объявление .mat-tooltip в основной файл стилей и изменив размер шрифта. Вы должны установить !important для размера шрифта, иначе он не появится.

Ответ 2

По документации здесь: 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

Чтобы увидеть изменения, в инструментах разработчика найдите div внизу с классом "cdk-overlay-container". Затем наведите курсор на элемент. Вы можете использовать клавиши со стрелками для навигации по элементу, когда вы находитесь над курсором, чтобы подтвердить, добавлен ли ваш класс.

Ответ 3

Вы можете использовать css /deep/ selector. Например:

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

Тогда вам не обязательно использовать !important

Ответ 4

Добавьте ng-deep перед именем класса

Попробуй это

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

Ответ 5

добавьте следующий код в свои styles.css, чтобы увеличить его размер шрифта, т.е. 12px

CSS

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

и используйте matTooltip в вашем теге как.

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

Ответ 6

У меня нет опыта с угловыми, но вы можете добавить класс или id для div. Тогда вы можете управлять этим классом или id с помощью css файла.

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

А также

.sth{
    font-size:20px;
}

в файле css.