title: How to add line breaks within tooltip in angular material design
body: <p>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</p>
  
  <p><a href="http://codepen.io/apps4any/pen/RWQLyr" rel="noreferrer">http://codepen.io/apps4any/pen/RWQLyr</a></p>
  
  <p>Html</p>
  
  <pre><code>&lt;div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp"&gt;
    &lt;md-content layout-padding=""&gt;
      &lt;md-button class="md-fab md-fab-top-right right" aria-label="Photos"&gt;
        &lt;md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"&gt;&lt;/md-icon&gt;
        &lt;md-tooltip&gt;
          List1&lt;br&gt;
          List2&lt;br&gt;
          List3&lt;br&gt;
          List4
        &lt;/md-tooltip&gt;
      &lt;/md-button&gt;
      &lt;div style="margin-top: 150px;"&gt;
      &lt;/div&gt;
    &lt;/md-content&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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; }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>angular.module('MyApp')
  .controller('AppCtrl', function($scope) {
    $scope.demo = {};
  });
  </code></pre>