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 (puteAutoPlacement.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=".2.1.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src=".js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src=".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!

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 (puteAutoPlacement.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./jquery-3.2.1.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn./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!

• javascript
• angularjs
• twitter-bootstrap
• bootstrap-4
• popover

• Bootstrap 4 is a lot different than 2 and 3. You won't be able to simply upgrade the cdn and expect to have everything working. – Kyle Krzeski Commented Jul 6, 2018 at 14:21
• 1 @WilliamHampshire I didnt say I expect everything to work... Im asking why it is not working even though I use it in accordience with v4 documentation. – Knight Commented Jul 6, 2018 at 14:24
• @Knight did you find the solution? I have the same issue. – galatians Commented Jul 24, 2018 at 14:24

3 Answers 3

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

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.

In my case I was passing placement: "" to the popover() function. I stopped passing the placement parameter and it worked well.