5

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

Haq.H
  • 863
  • 7
  • 20
  • 47
  • 1
    Do you not need to use
    – Dale Jan 15 '19 at 16:27
  • sorry how? do I introduce it like I would the new line? – Haq.H Jan 15 '19 at 16:28
  • using .join('
    ) introduces it as a literal character in the tooltip string     – Haq.H Jan 15 '19 at 16:36
  • Possible duplicate of [angular 2 material matTooltip multiline](https://stackoverflow.com/questions/47058483/angular-2-material-mattooltip-multiline) – Dale Jan 15 '19 at 16:38
  • I saw that before but it's adding a newline at whitespaces. My array of desc strings have spaces in them. So I need the newline to be by array index not at a white space – Haq.H Jan 15 '19 at 16:40
  • Similar issue with solution from [here](https://stackoverflow.com/questions/47058483/angular-2-material-mattooltip-multiline/61389854#61389854) – Kunchok Tashi Apr 23 '20 at 14:39

4 Answers4

6

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>
shteeven
  • 522
  • 4
  • 17
  • 1
    this doesn't work for me (I've tried to do the same here: https://stackblitz.com/angular/keqjqmxbrbg?file=app%2Ftooltip-position-example.html) – Edwin May 29 '20 at 11:06
  • @Edwin , you'll need to fork the stackblitz example and save your changes. The link you posted takes me to a project that doesn't have the solution I've mentioned, so I am unable to help you out. – shteeven Jul 04 '20 at 12:55
  • In an Angular 9 project, I had to prefix the stylesheet entry with `::ng-deep` to make it work. – Sbodd May 07 '21 at 20:49
  • It didn't work for me as well :( – Артур Гудиев Sep 27 '21 at 11:12
  • Артур Гудиев, do you have a stackblitz example? Or, some code to look at? – shteeven Sep 27 '21 at 12:18
4

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>
Ganesh Thorat
  • 492
  • 1
  • 7
  • 19
0

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>
Dale
  • 1,911
  • 11
  • 18
  • Doesn't this work only with whitespace? my array will look something like this [ 'desc 1: this', 'desc 2: that'] so adding new line at the white space won't work. Desc 1 and desc 2 need to be on their ownlines – Haq.H Jan 15 '19 at 16:41
  • I've added an example pre-line only breaks at line breaks not all whitespace, unless it needs to, to stop the text being longer than the container. – Dale Jan 15 '19 at 16:46
  • adding to my card. it adds spaces between the cards and thier element but the tooltip is unaffected... – Haq.H Jan 15 '19 at 18:19
  • I don't think the issue is with the newline character but rather with the tooltip itself. I tried introducing whitespace: pre-line but it didn't affect the tooltip at all – Haq.H Jan 15 '19 at 18:24
  • 1
    I used ::ng-deep and that was able to solve my problem I know its deprecated but that was the only solution that worked. As outlined here: https://stackoverflow.com/questions/47058483/angular-2-material-mattooltip-multiline – Haq.H Jan 16 '19 at 15:51
-1

Use <br />.

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

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176