JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<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.3.8/angular-messages.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<md-content class="md-padding">
  <md-tabs class="" md-selected="selectedTab" md-align-tabs="top" md-border-bottom md-autoselect md-dynamic-height>
<svg ng-repeat="status in statuses">
    
       <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
       
                  <md-tooltip md-direction="bottom">
          {{status.description}}
          </md-tooltip>
              
    
</svg>
    

  </md-tabs>
</md-content>
</div>
</div>

JavaScript

angular.module('MyApp', ['ngMaterial'])

.controller('MyCtrl', function ($scope) {
  $scope.statuses = [
      {name: "One", description: "First Tooltip"},
      {name: "Two", description: "Second Tooltip"},
      {name: "Three", description: "Third Tooltip"},
    ];
 

});