Question

我有一个带有以下HTML的Angular页面：

<div style="overflow-y:scroll; height:700px;" data-ng-if="ctrl.items.length">
    <table class="table table-striped">
        <tbody>
            <tr bindonce data-ng-repeat="i in ctrl.items">
                <td class="note-row">
                    <div my-tooltip-template="nav-fo-to-bo-compare/comments-hover-template.html" my-tooltip-scope="i.navSummary">
                        <div break-notes nav-summary="i.navSummary" item="i" note-disable="!ctrl.allowChanges"></div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

该页面显示表格中每条记录的自定义工具提示。以下是自定义工具提示指令。

angular.module('app').directive("myTooltipTemplate", function ($compile) {
        var contentContainer;
        return {
            restrict: "A",
            scope: {
                myTooltipScope: "="
            },
            link: function (scope, element, attrs) {
                var templateUrl = attrs.myTooltipTemplate;

                scope.hidden = true;

                var tooltipElement = angular.element("<div class='customTooltip' ng-hide='hidden'>");
                tooltipElement.append("<div ng-include='\"" + templateUrl + "\"'></div>");

                element.parent().append(tooltipElement);
                element
                  .on('mouseenter', function () { scope.hidden = false; scope.$digest(); })
                  .on('mouseleave', function () { scope.hidden = true; scope.$digest(); });

                var toolTipScope = scope.$new(true);
                angular.extend(toolTipScope, scope.myTooltipScope);
                $compile(tooltipElement.contents())(toolTipScope);
                $compile(tooltipElement)(scope);
            }
        };
    });

自定义工具提示CSS类：

.customTooltip{
            position:absolute;            
            background-color:#00adee;
            z-index:2; 
            display:block;
            right: 25px;       
        }

工具提示显示正确定位到屏幕上显示的记录。它出现在鼠标悬停上。但是，当我滚动页面以查看表格末尾的记录时，自定义工具提示似乎仍然显示在该表记录最初存在的位置。如何确保即使用户滚动表格，底部行的工具提示也会显示为网格顶部的工具提示？

Answer 1

添加

position:relative

到位于div的absolutley的父容器。也就是说，将position:relative添加到具有类note-row的div中。

可在此tutorial

中找到更多详情

当容器滚动时，在可滚动的<div>内移动隐藏的<div>

1 个答案: