css - ブートストラップのポップオーバーの位置が不安定に見える

Question

私は繰り返し可能な要素を備えた Angular のテンプレートに取り組んでいます。各要素にはポップオーバーがあります。テンプレートがレンダリングされると、すべてが正常に見えますが、ポップオーバーの配置が不安定に見えます。最初のポップオーバーの位置は正しいですが、後続のポップオーバーは間違った場所に固定されています。

ここに私の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の範囲内でクラスを微調整しようとしましたが、期待どおりに動作しませんでした。に適用 すると、最初のものを除いてすべてのツールチップが正しく固定されます。つまり、問題が逆転します。.tipsleftleft: -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 を追加したことにも注意してください。