angular 2 material matTooltip multiline

I'm new to Angular 2 Material. What's the preferred way to make a tool tip multi-line?

For example, I might have the following tool tip:

AA BBBBBBBBBB CCCC DDDDD 

And, I may want to to have it display in a multi-line format like this:

AA BBBBBBBBBB CCCC DDDDD 

7 Answers

First, create a class for your tooltip, to make it break lines on line breaks.

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

Then, add the class to your tooltip and insert line breaks with the Unicode code 


<span matTooltip="First line&#13;Second line" matTooltipClass="my-tooltip"> </span> 

You can achieve the same thing without even the need of \n or <br>. Just write your content as it is, if you need it to be multi-lined. For example:

"abc abc abc" 

All you have to do is to add this to your global css:

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

UPDATE 2021

The above solution is pretty old and ::ng-deep is deprecated as pointed out by @bsplosion in the comments.

If you don't want to use the solution of @rodris you can alternatively just edit the class directly. Add this to your global stylesheet:

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

In My Example I am using angular 6, Material Design. My Issue was 'I have array of string' and I have to show it in multiline MatTooltip. I handle the situation and it works for me. Here is code

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

<p matTooltip="{{myArray.join('\n')}}" >...</p>

none of this worked for me in my project i.e using angular 7,8 I found the solution from
here DEMO

In html

<img src="assets/icons/about.png" width="15px" height="15px" matTooltip="{{getMoreInformation()}}" matTooltipClass="test"/> 

In ts file

 getMoreInformation(): string { return 'Address : Home \n Tel : Number';// \n represent break line here } 

in your style.css file(remember project style.css)

.test { white-space: pre-line; } 

Hope it help someone. ps keep coding

You can simply do:

HTML:

<button matTooltip="AA BBBBBBBBBB CCCC DDDDD"> Hello world ! </button> 

CSS:

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

Result:

I'm using Angular 14 and neither of the answers worked for me right away.
First I added a class to the mat-tooltip:

<mat-icon [matTooltip]="tooltip" matTooltipClass="tooltip-class" </mat-icon> 

I also needed to add ::ng-deep to the css (sass in my case):

::ng-deep .tooltip-class white-space: pre-line 

The Unicode line break 
 also didn't work. Since I'm using string template a line break in the .ts file worked:

const tootltipText = `${strings.method}: ${strings.note} ${strings.reason}: ${strings.snapshot}` 

I also tested adding \n and it works both with regular strings and string tamplates:

const tootltipText = 'line\nbreak\nworks' 

For newer Angular Material versions 16+ To adapt the Material 3 design, they have changed the classes from mat-tooltip to mdc-tooltip.

::ng-deep .mdc-tooltip { white-space: pre-line !important; }