Angular Material Layout

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.js"></script>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<div ng-app="myapp">
  <md-button class="md-raised md-primary" aria-label="Play">
    <md-tooltip>
      I'm a multilinezxcvbndfgh dfghdcfgh zdxcfgvhbjn zsxdcfvgbooltipadedfcvgbhheightasdcfvgbhnjdfcvgbhheightasdcfvgbhnjdfcvgbhheigh  tasdcfvgbhnjdfcvgbhheightasdcfvgbhnjdfcvgbhheightasdcfvgbhnjdfcvgbhheightasdcfvgbhnjdfcvgbhheightasdcfvgbhnjasdfghjsedrftgyhujxcfvgbhnjasdfghjkaqwse drfghujzxdcfvgh it by a bear
    </md-tooltip>
    Hover Me!
  </md-button>
</div>

CSS

.md-tooltip {
   height: auto;
    white-space: pre-line; 
   
}

JavaScript

angular.module('myapp', ['ngMaterial']);