Angular: Tooltip on scrollable div

http://angularjs.org/

by jacobwsmith

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script>
<div ng-controller="myCtrl">
  <div class="scrollable">
    <table class="table table-striped">
      <thead>
        <tr>
          <th></th>
          <th>Name</th>
          <th>Type</th>
           <th>Type</th>
            <th>Type</th>
             <th>Type</th>
              <th>Type</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr 
          ng-repeat="item in rows" 
          uib-tooltip="BING BONG"
         >
          <td></td>
          <td>Name</td>
          <td>Type</td>
          <td>Type</td>
          <td>Type</td>
          <td>Type</td>
          <td>Type</td>
          <td>Action</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

body {
  margin: 50px
}
.scrollable{
  max-height: 340px;
  overflow: auto;
}

JavaScript

var app = angular.module('app', ['ui.bootstrap']);

// Tooltip config
app.config(['$uibTooltipProvider',
  function($tooltipProvider) {
    $tooltipProvider.options({
      placement: 'top',
      trigger: 'mouseenter',
      animation: false,
      popupDelay: 0,
      appendToBody: true,
      popoverMode: 'single'
    });
  }
]);

// Controller
// TODO: update to component
angular.module('app').controller('myCtrl', function($scope) {
  $scope.rows = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
});