Show object inside Angular Material Tooltip

Question

I have an object with several key-value pairs which I want to show in a tooltip when hovering over an icon. If I use JSON.stringify to pass the object to a string, the format shown inside the tooltip is really ugly, without any breaking line or space even if I include the space argument of the stringify.

How can I do to show prettier raw JSON data inside a tooltip?

component.ts

[...]
ngOnInit(): {
    this.myToolTip = JSON.stringify(myObject, null, 4)
}

component.html

[...]
<mat-icon [matTooltip]="myToolTip">whatever_icon</mat-icon>

Answer 1

Angular Material Tooltip does not support this out of the box. You have to modify it like here: angular 2 material matTooltip multiline

style.css

.mat-tooltip  {
  white-space: pre-line;
}