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">
  
  <md-button class="md-raised md-primary" aria-label="Play">
    <md-tooltip md-direction="bottom" class="custom-tooltip">
      I
    </md-tooltip>
    Hover Me! Custom
  </md-button>
  
  <md-button class="md-raised md-primary" aria-label="Play">
    <md-tooltip>
      I'm not a custom tooltip
    </md-tooltip>
    Hover Me! Normal
  </md-button>
</div>

CSS

.custom-tooltip {
 
  left: 0px !important;
  top:  0px !important;

}

JavaScript

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