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>

然后在我的控制器中，一旦页面加载，我就像这样设置popovers：

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

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

如您所见，第一个工具提示已正确锚定。然后，后续的工具提示锚定在一边。我似乎无法弄清楚原因是什么。我已经尝试在.popover范围内调整.tips类（请参阅下面的CSS）来修复left属性，但这并没有按预期工作。当我将left: -250px !important应用于.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。

Bootstrap popover位置似乎不稳定

0 个答案: