CODEWITHSUNDEEP
djangotwitter-bootstrappopper.js
Jorhanc
Jorhanc

Reputation: 350

Bootstrap popover does not work with downloaded js and css

I am having some weird problem with using popover in my django app. When using the css and js of a latest version of bootstrap it simply does not work. When I use link to 3.4.1 version I found in some tutorial everything works just fine. I'm attaching code that doesn't work and the one that does.
Did popover function got removed in latest bootstrap?

Works (3.5.1):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();
    });
</script>

Does not work (4.5.x):

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();
    });
</script>

Upvotes: 1

Views: 642

Answers (1)

Devart
Devart

Reputation: 340

You are missing popper.js.
Note that the bootstrap bundle js include the popper.js library. Try to load this one from CDN instead of bootstrap.js.
Require order :

  1. Jquery
  2. Popper
  3. Bootstrap

Upvotes: 1

Related Questions