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

但还不知道该职位的原因。使用角度指令和bootstrap [data-toggle =＆＃34; toggle＆＃34;]方式找出解决方案。

<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>

angular ui工具提示在元素

1 个答案: