Angular Material matTooltip testo con riga a capo

Nel caso che si sta utilizzando il controllo MatTooltip di Angular Material e si vuole riportare il testo in colonnato, ossia una parola sotto l'altra, tramite impostazione di stile possiamo ottenere tale effetto.

Di seguito si riporta il frammento di codice per tale operazione in Angular e TypeScript

HTML:

 <mat-list  [matTooltip]="getElementiTooltip()" placement="bottom">

    <div>

{{ variabile }}

                                </div>

                            </mat-list>

SCSS:

::ng-deep .mat-tooltip {

    white-space: pre-line;

  }

TypeScript:

 getElementiToolTip(proposti: string[]) : string{

       let Risultato: string = "";

        Array.forEach(p=> returnRisultato += p + ' \n ' );

        return Risultato;

    }