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;
}