angular ui tooltip появляется неправильное положение для элемента

Question

Я пытаюсь отобразить подсказку для загрузки и загрузки значков на моей странице. Наконечник инструмента очень сильно касается элемента.

Html выглядит следующим образом:

<tr ng-repeat="documents in docs" > 
    <td > 
     <a href="#" >{{documents.document_name}}</a> 
     <span tooltip="download" class='glyphicon glyphicon-download-alt'></span> 
    </td> 
</tr> 

<script> 
    var myApp = angular.module('myApp',['ui.bootstrap']); 
    myApp.controller('secondTrdCtrl', ['$scope','$http','$position',   function($scope,$http,$position) { 
    $scope.docs= [{document_name:"doc1",document_type:"A"}, {document_name:"doc2",document_type:"B"}] 
}]); 
</script> 

появляется подсказка, но она появляется почти снизу страницы. Не только рядом с иконкой загрузки.

Я не могу опубликовать снимок экрана здесь, так как моего счета репутации stackoverflow пока недостаточно.

Answer 1

еще не знаю, почему позиция пошла. Выявленное решение с использованием угловой директивы и бутстрапа [data-toggle = "toggle"].

<span data=toggle='tooltip' tooltip>download</span> 

<script> 
    $(document).ready(function(){ 
     $('[data-toggle="tooltip"]').tooltip(); 
    }); 

    var myApp = angular.module('myApp',['ui.bootstrap']); 
    myApp.directive('tooltip', function(){ 
     return { 
     restrict: 'A', 
     link: function(scope, element, attrs){ 
      $(element).hover(function(){ 
       // on mouseenter 
       $(element).tooltip('show'); 
      }, function(){ 
       // on mouseleave 
       $(element).tooltip('hide'); 
      }); 
      } 
     }; 
    }); 
</script>