迁移 bootstrap 到 v4 - 弹出窗口不工作

Question

我在将 Bootstrap 从版本 3 迁移到版本 4 时遇到问题。问题在于弹出窗口和 popper.js 库。每次我将鼠标悬停在一个元素上时，我都会收到此错误：

Uncaught TypeError: Cannot read property 'indexOf' of undefined

at v (computeAutoPlacement.js:24) at Object.onLoad (applyStyle.js:57) at index.js:69 at Array.forEach () at new t (index.js:67) at i.t.show (tooltip.js:286) at HTMLSpanElement. (popover.js:166) at Function.each (jquery.min.js:2) at r.fn.init.each (jquery.min.js:2) at r.fn.init.i._jQueryInterface [as popover] (popover.js:149)

我使用的库：

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

和Angular1.6

这是元素的样子：

<span class="tip-icon m-r-0" data-toggle="popover" data-content{{item.info}}" ng-if="item.info">Tooltip</span>

控制器中是这样设置的：

$('[data-toggle="popover"]').popover({
    trigger: 'hover',
    animation: false,
    html: true
});

当我迁移回 Bootstrap 2.3.2 时一切正常。

知道导致问题的原因吗？提前致谢！

Answer 1

我遇到了同样的问题并找到了解决方案，这是我的 popover 指令

angular
.module('app.ui.popover', [])
.directive('bsPopover', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<span class="a-info" ng-bind-html="label"></span>',
        link: function (scope, element, attrs) {
            var el = $(element);
            el.popover({
                container: 'body',
                trigger: attrs.trigger || 'hover',
                html: true,
                animation: false,
                content: attrs.content,
                placement: attrs.placement || 'auto top'
            });
        }
    };
});

我接下来所做的是将默认位置从 'auto top' 值更改为 'top' 并且现在有效:)

据我了解，现在您只能指定 auto | top | bottom | left | right.

之一

如果对您有帮助，请告诉我:)

Answer 2

接受的答案可能是正确的，但我停在了 'angular'。对于我的用例，Rails，我将 "gem 'tether-rails'" 添加到我的 Gemfile，"bundle install"ed，检查我是否需要 popper 和 tether（“//= 需要 tether”，等等）之前 bootstrap 在我的 application.js 文件中，然后重新启动服务器，一切又恢复正常了。

Answer 3

在我的例子中，我将 placement: "" 传递给 popover() 函数。我停止传递放置参数并且效果很好。

迁移 bootstrap 到 v4 - 弹出窗口不工作

Migrating bootstrap to v4 - popovers not working

javascript

angularjs

twitter-bootstrap

bootstrap-4

popover