it-swarm.com.ru

Установите размер шрифта Angular Подсказка к материалу

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

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

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

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

8
GLR

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

13
Dean Chalk

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

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

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

11
Serhii Kononov

По документации здесь: 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". Затем наведите курсор на элемент. Вы можете использовать клавиши со стрелками для навигации по элементу, когда вы находитесь над курсором, чтобы подтвердить, добавлен ли ваш класс.

11
kittycatbytes

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

Попробуй это

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

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

CSS

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

и используйте matTooltip в теге as.

<p matTooltip="My Tooltip">...<p>
0
Atif Zia

У меня нет опыта работы с angular, но вы можете добавить класс или идентификатор для div. Затем вы можете управлять этим классом или идентификатором с помощью CSS-файла.

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

А также 

.sth{
    font-size:20px;
}

в файле CSS.

0
G.Acikgoz