Can't make multi-line matTooltip, always getting single-line

Using [matTooltip]="myMultiLineStringGenerator()" combined with [matTooltipClass]="'my-tooltip'" I was expecting to give me multi-line tooltips, whoever I get one liner tooltip, and I have no control when lines ends and moves to the next line.

Steps to reproduce

HTML part

<p  [matTooltipClass]="'my-tooltip'"
    [matTooltip]="getTooltopScript(nearestStations)">
            Hello World!
</p>

CSS part:

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

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

TypeScript

getTooltopScript(ns: any[]]){
      let part1 =  ns[0]['stationName'] ;
      let part2 = ns[0]['regionName'];
      return `${part1}.\r\n\
       ${part2}.`;
}

I have read a lot other stack flows, and all of them where ending to use whitespace:pre-line in css, and \r\n in js\type script to create string. I dont know what else I should do make it work

Please help :)

update in CSS from other stackflows, and first comment below. I still have no result

::ng-deep .mat-tooltip .cdk-overlay-container, ::ng-deep .mat-tooltip .cdk- 
    global-overlay-wrapper {
    white-space: pre-line;
}