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

user_6471558 0
Viewed 7532

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

angular typescript html
4 Answers

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, &#13;, 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&#13;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>
user_16992250

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>
user_105534110

You can add the following CSS 

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


.with-pre-line
{
 white-space: pre-line;
 }
<div>
without white-space: pre-line; 
some text with spaces
and 
newlines
<div>




<div class="with-pre-line">
with white-space: pre-line;
some text with spaces
and 
newlines only breaks
on newlines
<div>

user_32786480

Use <br />.

To insert HTML into a tag with Angular, use: <span class="card-title" style="font-size: 12px" [innerHTML]="item.itemName"></span>

Diodeus_125790
Related