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> 

工具提示会出现，但它似乎几乎底部的页面。不只是在下载图标旁边。

我不能在这里张贴截图，因为我的计算器信誉计数是不够的。

Answer 1

但不知道职位的原因。通过使用angular指令和bootstrap [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>