How to add line breaks within tooltip in angular material design

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

.md-tooltip {
    height: auto;
}

And if you want to style a particular tooltip, add a custom class to md-tooltip element:
(jsFiddle)

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

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

Related