angular 2 材质 matTooltip 多线

Question

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

Answer 1

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>

Answer 2

you can achieve the same thing without even the need of \\n or
just write your content as it is for example :

" abc
  abc
  abc " 

if you need it to be multilined

All you need to do is

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

add the above to your css

UPDATE:: 2021

The above solution is pretty old and ::ng-deep is depricated as pointed out by @bsplosion in the comments. You can write the above css in your global stylesheet. depending where you placed your global.

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

If you don't want to use the above way like previous solution of rodris you can just add the class directly.

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

Answer 3

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>

Answer 4

none of this worked for me in my project ie 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

Answer 5

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 :

Answer 6

You can set the tooltip style using ng-deep:

::ng-deep .mat-tooltip  {
    max-width: 60px !important; // for example
}

DEMO