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

Source : https://www.angularjswiki.com/material/tooltip/

It's a bit late, to people who want to have breaklines in the tooltip, you create a custom class in your global CSS and add this class with "matTooltipClass".

HTML

<button mat-raised-button
    matTooltip="Multiline Tooltip &#13; This is second line"
    matTooltipClass="multiline-tooltip">
    Multiline tooltip
</button>

Global CSS

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

---

You can also add in your specific component, you should add

encapsulation: ViewEncapsulation.None

to your component.ts

@Component({
  selector: 'app-tooltip',
  templateUrl: './tooltip.component.html',
  styleUrls: ['./tooltip.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class TooltipComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

https://siderite.dev/blog/styling-angular-material-tooltips.html/

Hope this can help others

Answer 2

The answer from Asaf is working perfectly for me. Angular 14

matTooltip="Component: Test 
Last updated date: 2023-01-17T09:17:02.753Z"

Mattooltip

Answer 3

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"