0

I am creating a website using bootstrap 5, I would like to have a button that when the user clicks it that a popover appears.

I have added jQuery and the popper.js files to my files. However when I click on the button nothing happens. I have checked the console and it doesn't seem to show any errors. I have no idea what is wrong.

Here is my button code.

  <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."><i class="fas fa-shopping-cart" style="color: #fff;">
  Cart </i>
</button>

Here is my jQuery code

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

Here are the jQuery and popper.js files I have linked.

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

I am wonder if I have linked the wrong version of the files as the bootstrap website wasn't very helpful when it came to this.

CodeLover
  • 166
  • 1
  • 11
  • 34

2 Answers2

1

Change the data-* attributes with data-bs-* (For example: data-toggle to data-bs-toggle and so on) and change the script to the one provided below to turn on popovers.

In addition, make sure you include Bootstrap assets correctly and everything should be fine. In your case you have not included bootstrap css file so the popover would show up with no styling. Again you can check the below snippet for more details.

<html>

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

</head>

<body>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."><i class="fas fa-shopping-cart" style="color: #fff;">
  Cart </i>
</button>





<script>

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

</script>

</body>


</html>
Ali Abbasov
  • 113
  • 1
  • 2
  • 7
0

Not sure if this is too late...but try use the following...

<p>This<a href="#" data-toggle="popover" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute."><i class="fas fa-shopping-cart" style="color: #fff;"></i></a> triggers a popover on click.</p>

$(document).ready(function() {
    $("body").popover({ selector: '[data-toggle="popover"]' });
});

Useful answer here... https://stackoverflow.com/a/22569369/6790839

Darren Oelofse
  • 1
  • 1