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

回答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 the line breaks with its code 


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

回答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

回答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>

回答4:

You can set the tooltip style using ng-deep:

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

DEMO

来源：https://stackoverflow.com/questions/47058483/angular-2-material-mattooltip-multiline