So I’m really stumped here because I am literally using the documentation‘s example and it is simply refusing to work.
I have
- Imported Boostrap
- Imported Popover
- Initialised Tooltips
- Initialised Popover
All as per the documentation.
I have then added the following code to tryout popovers:
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
This is the same code as on the documentation, the popup shows, but incorrectly, it only displays the title and not the content. And once the first Toggle is completed aka, once you show and then hide the popover, it doesn’t show again.
By the way here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="./assets/scripts/init-tooltips.js" defer></script>
<script src="./assets/scripts/init-popover.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">About me</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./index.html">Introduction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./life.html">Life</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="./life.html">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</div>
</nav>
</head>
<body>
<h1 class="center">Education</h1>
<figure class="center">
<img src=./assets/images/1.jpeg>
<img src=./assets/images/2.jpeg>
<img src=./assets/images/3.jpeg>
<img src=./assets/images/4.jpeg>
<img src=./assets/images/5.jpeg>
</figure>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<p>test</p>
</body>>Solution :
It is because you’re using data-bs-popover and data-bs-content on the button and that is Bootstrap 5 formatting.
You are calling Bootstrap 4 with
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3...........</script>
Use data-popover and data-content for Bootstrap 4.