Home Bootstrap 5 data-bs-toggle vs data-toggle. Adding the bs breaks my whole Popper

Questions

Bootstrap 5 data-bs-toggle vs data-toggle. Adding the bs breaks my whole Popper

May 26, 2022

I’m one month into learning Web Development.
From what I’ve read, the data-bs-toggle is the newer name for Bootstrap 5.

What is the difference between Bootstrap data-toggle vs data-bs-toggle attributes?

My code is simple. In the head, I’ve included CSS, jQuery, and JavaScript Bundle with Popper.
In the body, I have two links with a popover. In the script, I initiate popover.

By changing data-toggle to data-bs-toggle my popover wouldn’t work.

data-bs-content on the other hand would not work if I change it to data-content
Why does this happen?

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
            rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
            crossorigin="anonymous"></script>
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  </head>
  <body>
    <a href="#" title="Header" data-bs-toggle="popover" data-placement="top" data-bs-content="Content">Click</a>
    <a href="#" title="Header" data-toggle="popover" data-placement="top" data-bs-content="Content">Click</a>
  </body>
  <script>

  $(function () {
    $('[data-toggle="popover"]').popover()
    console.log('activated')
  })

</script>
</html>

>Solution :

You need to decide which data-toggle to initiate.

If You use $('[data-toggle="popover"]').popover() it initiates popover which has specified data-toggle

If You use $('[data-bs-toggle="popover"]').popover() it initiates popover which has specified data-bs-toggle

Stick to one version – data-toggle or data-bs-toggle

I recommend using data-bs-toggle.
If You will copy code from docs, remember that DOC’s describes Bootstrap 4. So if You’re using Bootstrap 5 some utilities won’t work with data-toggle.