Tooltips bootstrap angular directive

supporting also ng-repeat.

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body ng-app="myApp" ng-controller="MainCtrl">

</body>
  
  <div>ALL TOOLTIPS:</div><br/>
  
  <div ng-repeat="_type in types" data-toggle="tooltip" data-original-title="{{_type.name}}" style="border: 1px solid blue; width: 50px;" tooltip-loader>
    {{_type.name}}
  </div>
        
  <div data-toggle="tooltip" data-original-title="Zoom reset" style="border: 1px solid blue; width: 100px;" tooltip-loader>
    <span>Zoom reset</span>
  </div>
    
</body>

JavaScript

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

    
      app.directive('tooltipLoader', function() {
        return function(scope, element, attrs) {

          element.tooltip({
            trigger:"hover",
            placement: "top",
            delay: {show: 100, hide: 0}
          });
          console.log("AAAAAAAAAAAAAAAA5555");

        };
      });

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.types = [{
        name: 'note',
        iconName: 'icon-text_tool_big'
      }, {
        name: 'rect',
        iconName: 'icon-square_tool_big'
      }, {
        name: 'circle',
        iconName: 'icon-ellipse_tool_big'
      }, {
        name: 'arrow',
        iconName: 'icon-arrow_tool'
      },{
        name: 'path',
        iconName: 'icon-free_line_tool'
      }
    ];
    
}]);