2

我正在使用具有可重复元素的 Angular 模板。每个元素都有一个弹出框。当我的模板呈现时，一切看起来都很正常，但是我的弹出框的位置似乎不稳定。第一个 popover 的位置是正确的，但随后的 popover 被锚定到错误的位置。

这是我的 HTML：

<div class="dashboard-stat" ng-repeat="s in stats">
    <div class="number">
        {{s.number}}
    </div>
    <div class="text">
        {{s.text[0]}}
        <br />
        {{s.text[1]}}
    </div>
    <div class="tips">
        <div class="btn btn-xs btn-transparent with-border" data-toggle="{{s.name}}">
            <i class="fa fa-info-circle"></i> Tips
        </div>
    </div>
</div>

然后在我的控制器中，一旦页面加载，我将弹出框设置如下：

function setToggles() {
    $scope.stats.forEach(function(stat) {
        $('[data-toggle="' + stat.name + '"]').popover({
            delay: {show: "0", hide: "1000000"},
            content: stat.tip,
            html: true,
            trigger: "hover",
            placement: "left"
        });
    });
};

这是演示问题的屏幕截图：

在此处输入图像描述

如您所见，第一个工具提示已正确锚定。不过，随后的工具提示被锚定在一边。我似乎无法弄清楚原因是什么。我尝试在（参见下面的 CSS）.popover范围内调整类.tips以修复该left属性，但这并没有按预期工作。当我申请 left: -250px !important时.popover，除第一个工具提示外，所有工具提示都已正确锚定。换句话说，问题反过来了。

这是.tipsCSS：

.tips {
    position: absolute;
    top: 0;
    right: -20px;
    display: flex;
    height: 100%;
    align-items: center;
    .btn {
        cursor: default;
    }
    .popover {
        left: -250px!important;
    }
}

最后，我还尝试向popover函数传递一个container参数，如下所示：

function setToggles() {
    $scope.stats.forEach(function(stat) {
        $('[data-toggle="' + stat.name + '"]').popover({
            delay: {show: "0", hide: "0"},
            content: stat.tip,
            html: true,
            container: '#tooltip-' + stat.name.replace(' ', '-'),
            trigger: "hover",
            placement: "left"
        });
    });
};

我以前使用过上述技巧来解决同样的问题，但这次似乎不起作用。另请注意，当我尝试此操作时，我确实向我的元素添加了适当的 ID。

4

0 回答 0