angular 2 material matTooltip multiline

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>