Boostrap's popover only displaying title and stops working after first toggle-CodePudding

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.

Screenshot of what happens

By the way here is my code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/umd/popper.min.js" defer></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePudding user response：

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/[email protected]...........</script>

Use data-popover and data-content for Bootstrap 4.