Angular Material Layout

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.js"></script>
<div ng-app="myapp" ng-controller="mainCtrl as vm">
  <md-button class="md-raised md-primary" aria-label="Play">
    <md-tooltip>
      <span ng-bind-html="vm.msg | unsafe"></span>
    </md-tooltip>
    Hover Me!
  </md-button>
</div>

CSS

.md-tooltip {
  height: auto !important;
}

JavaScript

angular.module('myapp', ['ngMaterial'])
  .filter('unsafe', function($sce) {
    return function(value) {
      var txt = document.createElement("textarea");
      txt.innerHTML = value;
      return $sce.trustAsHtml(txt.value);
    }
  })
  .controller('mainCtrl', function() {
    var vm = this;
    vm.msg = 'Some html&lt;br&gt;&lt;strong&gt;card&lt;/strong&gt;';
  })