自定义 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>

堆栈闪电战链接。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 链接之一 使用 JavaScript 进行漂亮打印 JSON

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">

行动