javascript - 在容器滚动时将隐藏的 <div> 移动到可滚动的 <div> 中

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 的父容器。即，将 position:relative 添加到类为 note-row 的 div。

更多详细信息可以在这个 tutorial 中找到