title: Angular Tooltip does not recognize '\r' or '\n' characters
body: <p>So to outline the use case: 
  From my back-end service i receive a list of objects which I break apart using ngFor and display using . I attach a toolTip to this card to show a info about the item. The info for each item is a list of elements. For the tooltip I send the list to a function and join the items of the list with '\r\n' characters however the tooltip doesn't read the characters at all and just shows a contiguous string in the tooltip</p>
  
  <pre><code>&lt;div *ngFor="let item of itemList; "&gt;
   &lt;mat-card matTooltip="{{getDesc(item)}}"&gt;
      &lt;span class="card-title" style="font-size: 12px"&gt;
        {{ item.itemName }}
      &lt;/span&gt;
   &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The toolTip description function:</p>
  
  <pre><code>getDesc(item){
    let itemDesc: any;
    if(item.itemDescList !== null)
      itemDesc = item.itemDescList.join('\r\n')
    return itemDesc
  }
  </code></pre>
  
  <p>how can I introduce those newlines in the tooltip?</p>
  
  <p>example array: [ 'desc 1 : some text', 'desc 2: some text', ...] these need to be shown on new lines in the tooltip</p>