Mat Tooltip multiline

Question

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

Может кто-нибудь помочь с этим?

  <span [matTooltipClass]="new-lines"
               matTooltip="I am on line 1&#13; I should be on Line 2">
               <i class="fas fa-sync" style="color: white;"></i>
     </span>

::ng-deep .new-lines  {
  white-space: pre-line    !important;
}

Answer 1

Вы используете привязку свойства для передачи класса во всплывающую подсказку:

[matTooltipClass]="new-lines"
       /               \
 @Input name          expression

Как видите, Angular считает, что вы передаете результат выражения new - lines. Это означает, что в вашем компоненте должны быть определены два свойства: new и lines

Очевидно, что это не то, что вы ожидали. Вам нужно передать 'new-lines' строку.

У вас есть много вариантов здесь:

matTooltipClass="new-lines"

[matTooltipClass]="'new-lines'"

bind-matTooltipClass="'new-lines'"

Пример Stackblitz