Angular Tooltip does not recognize '\r' or '\n' characters

Question

So to outline the use case: From my back-end service i receive a list of objects which I break apart using ngFor and display using . I attach a toolTip to this card to show a info about the item. The info for each item is a list of elements. For the tooltip I send the list to a function and join the items of the list with '\r\n' characters however the tooltip doesn't read the characters at all and just shows a contiguous string in the tooltip

<div *ngFor="let item of itemList; ">
 <mat-card matTooltip="{{getDesc(item)}}">
    <span class="card-title" style="font-size: 12px">
      {{ item.itemName }}
    </span>
 </mat-card>
</div>

The toolTip description function:

getDesc(item){
  let itemDesc: any;
  if(item.itemDescList !== null)
    itemDesc = item.itemDescList.join('\r\n')
  return itemDesc
}

how can I introduce those newlines in the tooltip?

example array: [ 'desc 1 : some text', 'desc 2: some text', ...] these need to be shown on new lines in the tooltip

Answer 1

This has been answered in this post.

First, create a class that will add the white-space: pre-line style. Put it inside your styles.scss file, or other root level css file; if you want to place it in a component's stylesheet, prefix the class with ::ng-deep:

// in root stylesheet
.line-broken-tooltip {
  white-space: pre-line;
}
// in component's stylesheet
::ng-deep .line-broken-tooltip {
  white-space: pre-line;
}

Then add the class by using the matTooltipClass input.

To test it out, you can add a new-line delimiter, 
, between the sections you want broken-up:

<mat-card    
    matTooltip="One line&#13;Two line"
    matTooltipClass="line-broken-tooltip">
</mat-card>

or

this.tooltipText = 'One line
Two line';

<mat-card    
    [matTooltip]="tooltipText"
    matTooltipClass="line-broken-tooltip">
</mat-card>

And to test it without explicitly stating the delimiter, use a template string instead, so that the new-line is preserved:

this.tooltipText = `
  This value has been updated.
  Confidence: ${this.confidence}
`;

<p    
   [matTooltip]="tooltipText"
    matTooltipClass="line-broken-tooltip">
A02.0 - Salmonella enteritis 
</p>

Answer 2

Angular 8/9

For Angular 8/9 below solution (using ::ng-deep) worked for me,

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

<span    
    matTooltip="First line \n Second line"
    matTooltipClass="mat-tooltip-class-here">
</span>