How to add line breaks within tooltip in angular material design

Adding this CSS seems to work in your case (with the <br>s):

md-tooltip .md-content {    height: auto;}

I'm not sure why Angular-Material hard-coded the height to 22px. You'll need to check whether this change breaks other tooltips.

Or you can apply it specifically to this use case only by giving it a class, e.g. tt-multiline, so you can target it in CSS:

md-tooltip.tt-multiline .md-content {    height: auto;}

Edit: Starting from Angular-Material 1.1, some class names have changed to start with a underscore.

In this case use

md-tooltip ._md-content {    height: auto;}

and for specific class

md-tooltip.tt-multiline ._md-content {    height: auto;}

Since angular-material version >1.1.2 you can simply override .md-tooltip class:
(JsFiddle)

.md-tooltip {    height: auto;}

HTML

<md-tooltip class="tooltip-multiline">    I'm a multiline <br/> tooltip</md-tooltip>

CSS

.tooltip-multiline {  height: auto;}

both cases tested in angular-material 1.1.2, 1.1.3 and 1.1.4 versions

Set the max-with's below to what ever you need. Now it will do automatic line breaks or put a <br/>into it.

md-tooltip .md-content {    height: auto !important;    max-width: 200px !important;    font-size: 13px !important;}md-tooltip {    height: auto !important;    max-width: 200px !important;    font-size: 13px !important;    overflow: visible !important;    white-space: normal !important;}md-tooltip ._md-content {    height: auto !important;    max-width: 200px !important;    font-size: 13px !important;}