Css Bootstrap popover的位置似乎不稳定

我正在用Angular开发一个模板，它有一个可重复的元素。每个元素都有一个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>

以下是演示问题的屏幕截图：

如您所见，第一个工具提示已正确定位。不过，后续工具提示将锚定在一侧。我似乎不知道原因是什么。我尝试在

.tips

的范围内调整

.popover

类（请参见下面的CSS），以修复

left

属性，但没有按预期效果。当我应用

左时：-250px！重要信息

至

.popover

，除第一个工具提示外，所有工具提示均已正确定位。换句话说，问题正好相反

以下是

.tips

CSS：

.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

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"
        });
    });
};