自定义 Angular 材质 mattooltip 和格式数据以显示在工具提示中

Question

我想在工具提示中以 json 格式显示数据，如图所示。

我能够在工具提示中加载数据（但不是附件图片中的格式）。

<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 代码存在于 stackblitz 链接中。

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

当我们将鼠标悬停在第一列时，需要在工具提示条件、偏移量、警报中显示，如附图所示。

#EDIT1 我也尝试过基本的 html 工具提示，如果有人可以建议格式化数据，这对我也有用

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

供参考的so链接之一 pretty-print JSON using 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;
}