Search code examples
javascripttwitter-bootstraptooltippopoverbootstrap-5

Tooltips and Popovers not working in Bootstrap 5

I created a very small site, with Bootstrap 5.

I created 2 buttons at the bottom of the page using "tooltips" and "popovers" but they don't work, nothing is displayed.

Here is my site, it's at the bottom of the page :

https://www.mathieulebert.fr/

And here is the HTML code :

<!doctype html>
<html lang="fr" class="h-100">

  <head>
    <link rel="manifest" href="/manifest.json">
    <link rel="canonical" href="https://www.mathieulebert.fr/">
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>

  <body class="position-relative d-flex flex-column bg-dark text-white text-center" data-bs-spy="scroll" data-target="#navbar" data-bs-offset="85" tabindex="0">  

<button type="button" class="btn btn-secondary m-5" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

<button type="button" class="btn btn-secondary m-5" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Copié">
  Popover on bottom
</button>

    <script src="bootstrap.bundle.min.js"></script>
    <script src="clipboard.min.js"></script>
    <script src="pwa.js"></script>
    <script src="feed.js"></script>

    <script>
      var clipboard = new ClipboardJS('.btn-clipboard');

      clipboard.on('success', function (e) {
        console.log(e);
      });

      clipboard.on('error', function (e) {
        console.log(e);
      });
    </script>

  </body>

</html>
Solution

  • In current implementation, the code to enable tooltips and popovers everywhere is not run by default. You have to run it yourself, mainly because Bootstrap tries to make less assumptions about your website and give you more control. This might change in the future.

    You have an example in their docs on how to enable tooltips everywhere.
    A shorter version:

    [...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
  .forEach(el => new bootstrap.Tooltip(el))

    And you have an example on the popovers doc page on how to enable popovers everywhere.
    Shorter version:

    [...document.querySelectorAll('[data-bs-toggle="popover"]')]
  .forEach(el => new bootstrap.Popover(el))

    You have to run this code after loading Bootstrap's JS, e.g. bootstrap.bundle(.min).js

    Note: Unlike with other versions of Bootstrap, where reading documentation was somewhat optional, with v5 this doesn't hold true as much.
    A lot of assumptions have been dropped, quite a few things have changed and you have been given more freedom.

    To make sure this was the only reason they didn't work in your implementation, I ran the above code on your website and here's the result:

    screenshot