Break line tooltip angular material

Question

i'd like to know if someone knows how to jump a line in the angular material component "tooltip"

Here my code :

HTML :

<mat-icon 
   [matTooltip]="getMoreInformations()"
   matTooltipPosition="left">
   myIcon
</mat-icon>

TS :

getMoreInformations(): string {
   return 'Adress : ' + this.person.adress
      + ' \n  Tel : ' +  this.person.tel;
   }

\n and br doesn't work (tried both)

Also tried to add a matTooltipClass like this:

HTML :

<mat-icon...
  matTooltipClass="test"
...

CSS :

.test {
  white-space: pre-line;
}

Answer 1

Here's an example using your markup/code (which works fine) - stackblitz

To get the CSS to work I had to put the class in the file styles.css rather than the component stylesheet. This was taken from willshowell's comment to this issue - https://github.com/angular/material2/issues/8316

Edit: The following works in the component stylesheet

::ng-deep .test {
  white-space: pre-line;
}

The documentation suggests ::ng-deep is deprecated but it still works with the latest version.