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