title: To customize Angular material mattooltip and format data to show in tooltip
body: <p>I want to show the data in tooltip in json format as attached in the pic.</p>
  
  <p>I am able to load the data in tooltip(but not the way it is formatted in the picture attached).</p>
  
  <pre><code>&lt;ng-container matColumnDef="Alert"&gt;
                  &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Alert &lt;/th&gt;
                  &lt;td mat-cell *matCellDef="let row"&gt;
                          &lt;span matTooltip="{{(row?.conditionals)?(row.conditionals | json):''}}"&gt;{{row.Alert}}&lt;/span&gt; 
                  &lt;/td&gt;
   &lt;/ng-container&gt;
  </code></pre>
  
  <p>Stackblitz link. The html and ts code is present in stackblitz link.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-mat-tooltip-xngsaq?file=app%2Ftooltip-overview-example.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-mat-tooltip-xngsaq?file=app%2Ftooltip-overview-example.ts</a></p>
  
  <p>In the tooltip Conditionals, Offset, Alert needs to be shown as in the attached pic, when we hover on first column.</p>
  
  <p><strong>#EDIT1</strong>
  <em>I also have tried basic html tooltip if anyone can suggest formatting data on this that would also work for me</em></p>
  
  <p><a href="https://stackblitz.com/edit/angular-mat-tooltip-ik3f8e?file=app%2Ftooltip-overview-example.css" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-mat-tooltip-ik3f8e?file=app%2Ftooltip-overview-example.css</a></p>
  
  <p>For reference one of the so links
  <a href="https://stackoverflow.com/questions/4810841/pretty-print-json-using-javascript?noredirect=1&amp;lq=1">pretty-print JSON using JavaScript</a></p>