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>