Javascript 自定义角度材质mattooltip并格式化要在工具提示中显示的数据的步骤

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

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

警觉的
{{row.Alert}}

Stackblitz链接。html和ts代码出现在stackblitz链接中

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

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

其中一个so链接仅供参考 我想，我把它修好了

::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;
}

--更新--

添加

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;

    }

{{row.Alert}
然后像这样更改css文件
.刀尖{
字体大小：15px；
空白：预包装；
颜色：灰色！重要；
背景色：rgba（255、255、255、.9）！重要；
边框：1px纯色灰色；
最大宽度：未设置！重要；
}

一个按钮

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

行动

---

尝试使用

空白：预包装

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

你是说像这样@ManirajMurugan我可以按照您在stackblitz链接中使用的格式显示数据，但希望与所附图片匹配您是否希望在警报消息fiead下显示，对吗？@errorau我已经更新了stackblitz，是的，当我们将鼠标悬停在第一列时，数据将显示在工具提示中，但格式与附件图片中的格式不同，谢谢在工具提示中显示如此巨大的文本不是一个好主意。改为在对话框中显示它，您可以在其中自定义所需的方式。谢谢，我已使用普通html工具提示更新了以下链接，您是否可以建议修改此链接possible@Enthu我更新答案，如果你打开封装线，它将工作感谢很多，我已经接受我点击了赏金，但它将只允许在6小时后，不管怎样，我会这么做，如果你能帮助的话，还有一个部分，那就是如何在工具提示中放置一个按钮，点击后选择一个材质对话框nice:）这里的按钮使用这个工具提示hanks，但是我也需要格式化数据（与附件中的图片相同）：），现在我已经开始使用普通的html工具提示，如果您可以建议格式化数据，您可以尝试使用以下
空白：pre谢谢，空白：前期工作，但不是以我在图片中附加的方式，：），我们可以像图片中一样格式化吗
::ng-deep .mat-tooltip {
   font-size: 15px;
  background: green;
  white-space: pre-wrap;
}