Angular Material matTooltip break line elements

Question

Im using Angular 7 and Angular material matTooltip.

I want that the tooltip displays every element in the next line, something like this:

But, instead I'm getting this:

I got 3 elements per line, and I don't want that. I want one element/line.

My code is as follows:

app.component.ts

items=['15-09-2020: 200','16-09-2020: 200','17-09-2020: 200', '18-09-2020: 200'];
newItems = this.items.join("\r\n");

app.component.html

<div class="col col-sm-2" matTooltipPosition="after" matTooltip="{{ items}}"></div>

Check this example that is not working for me:

Stackbliz

Answer 1

I have fixed this in my project using 


So, what you'll need to do is:

newItems = this.items.join("
");

Another thing, you need to change this:

matTooltip="{{ items}}"

To this:

[matTooltip]="items"