How to add line breaks within tooltip in angular material design

Question

How to add line break in tooltip I have implemented the Tooltip but i am not able to add multi line or line breaks in tooltip.Below is my code

http://codepen.io/apps4any/pen/RWQLyr

Html

<div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp">   <md-content layout-padding="">     <md-button class="md-fab md-fab-top-right right" aria-label="Photos">       <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>       <md-tooltip>         List1<br>         List2<br>         List3<br>         List4       </md-tooltip>     </md-button>     <div style="margin-top: 150px;">     </div>   </md-content> </div> 

CSS:

.tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover {   box-shadow: none;   border: none;   transform: none;   -webkit-transform: none; } .tooltipdemoBasicUsage .left {   top: 70px !important;   left: 56px !important; } .tooltipdemoBasicUsage .right {   top: 70px !important;   right: 56px !important; } 

JS

angular.module('MyApp') .controller('AppCtrl', function($scope) {   $scope.demo = {}; }); 

Answer 1

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