Tooltips and Popovers not working in Bootstrap 5

Asked 7/4, 2021 at 16:57 Answered 15/12, 2021 at 20:58

Solved javascript twitter-bootstrap tooltip popover 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>

Hensel answered 7/4, 2021 at 16:57 Comment(0)

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:

Rocambole answered 7/4, 2021 at 17:10 Comment(2)

what is bootstrap as in new bootstrap.Tooltip, what needs to be imported / done in order to have the bootstrap variable from this example in the scope? – Coriecorilla 29/5 at 10:25

window.bootstrap is populated when you import bootstrap (e.g: <script src="js/bootstrap.bundle.min.js">, or from CDN). Alternatively, you can use it as module. Please note the "Incompatible plugins" warning at the end of that section. – Rocambole 29/5 at 12:12

Please arrange the links
first bootstrap.min.js
second bundle.min.js or popper.js

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

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


<script>
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
    })
</script>

Westland answered 13/8, 2021 at 19:30 Comment(2)

This works for me. I did put the script like the guidance from bootstrap 5, but I didn't put bootstrap.bundle on the script. Thanks! – Zoology 4/1 at 8:17

bootstrap.bundle.min.js already includes bootstrap.min.js. – Rocambole 29/5 at 12:17

Popovers need to be explicitly enabled in Bootstrap v5.1.

bootstrap.bundle.min.js includes popper.js which is a 3rd party library on which popover and tooltip components rely upon.

Paste the following in the end of the body -

<script>
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
      return new bootstrap.Popover(popoverTriggerEl)
    })
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
</script>

Reference here

Duff answered 15/12, 2021 at 20:58 Comment(0)

Recommended topics

Hot tags