Migrating bootstrap to v4 - popovers not working

Question

I have problem with migrating Bootstrap from version 3 to 4. The problem is with popovers and the popper.js library. Every time I hover on an element I get this error:

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)

Libraries I used:

<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>

And Angular 1.6

This is how the element looks like:

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

And this is how it is set in the controller:

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

When I migrate back to Bootstrap 2.3.2 everything works fine.

Any idea about what is causing the problem? Thank you in advance!

Answer 1

I've faced the same problem and found solution, here is my popover directive

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

and what I did next was changing default placement from 'auto top' value to 'top' and it works for now :)

As far I understood, now you can specify only one of auto | top | bottom | left | right.

Let me know if that helps you :)

Answer 2

The accepted answer is probably the correct one, but I stopped at 'angular'. For my use case, Rails, I added "gem 'tether-rails'" to my Gemfile, "bundle install"ed, checked that I required popper and tether ("//= require tether", etc.) before bootstrap in my application.js file, and restarted the server and everything was working again.