Чтобы настроить Angular материал mattooltip и форматировать данные для отображения во всплывающей подсказке

Question

Я хочу показать данные во всплывающей подсказке в формате json, прикрепленные к пи c.

Я могу загрузить данные во всплывающей подсказке (но не так, как они отформатированы в картинка прилагается).

<ng-container matColumnDef="Alert">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Alert </th>
                <td mat-cell *matCellDef="let row">
                        <span matTooltip="{{(row?.conditionals)?(row.conditionals | json):''}}">{{row.Alert}}</span> 
                </td>
 </ng-container>

Stackblitz ссылка. Код html и ts присутствует в ссылке на стек стека.

https://stackblitz.com/edit/angular-mat-tooltip-xngsaq?file=app%2Ftooltip-overview-example.ts

В подсказке Условные обозначения, Смещение, Предупреждение должно отображаться, как в прилагаемом pi c, когда мы наводим курсор на первый столбец.

# EDIT1 Я также попробовал всплывающую подсказку basi c html, если кто-то может предложить отформатировать данные, которые будет также работать для меня

https://stackblitz.com/edit/angular-mat-tooltip-ik3f8e?file=app%2Ftooltip-overview-example.css

Для справки одна из ссылок так pretty-print JSON с использованием JavaScript

Answer 1

Я думаю, я исправил это

::ng-deep .mat-tooltip {
 font-size: 15px;
 white-space: pre-wrap;
 color: gray !important;
 background-color: rgba(255, 255, 255, .9);
 border:1px solid gray;
 max-width: unset !important;
}

https://stackblitz.com/edit/angular-mat-tooltip-g28f5w?embed=1&file=app / tooltip-Overview-example. css - Обновление -

Добавить matTooltipClass

<span [matTooltipClass]="{ 'tool-tip': true }" matTooltip="{{(row?.conditionals)?(row.conditionals | json):''}}">{{row.Alert}}</span> 

then change css file like 


.tool-tip {
     font-size: 15px;
    white-space: pre-wrap;
    color: gray !important;
    background-color: rgba(255, 255, 255, .9) !important;
    border:1px solid gray;
    max-width: unset !important;

    }

Для кнопки

 <button mat-raised-button
    [matTooltipClass]="{ 'tool-tip': true }" matTooltip="{{(row?.conditionals)?(row.conditionals | json):''}}"
    aria-label="Button that displays a tooltip when focused or hovered over">

Действие

Answer 2

попробуй с white-space: pre-wrap;

::ng-deep .mat-tooltip {
   font-size: 15px;
  background: green;
  white-space: pre-wrap;
}