Issues with Tooltips and Popovers in Bootstrap 5

Question

Issues with Tooltips and Popovers in Bootstrap 5

I recently built a small website using Bootstrap 5.

On this site, I added 2 buttons at the bottom of the page with tooltips and popovers. However, they seem to be malfunctioning as nothing is being displayed.

You can check out the site for yourself at the following link:

Below is the HTML code I used:

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

javascript twitter-bootstrap tooltip popover bootstrap-5

Answer 1

Answer №1

The current setup does not automatically enable tooltips and popovers everywhere in the code. You need to manually initiate it, as Bootstrap aims to provide more flexibility and avoid making assumptions about your website. However, this approach may change in the future.

For guidance on how to enable tooltips across the site, you can refer to their documentation.
Here is a more concise version of the code:

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

Similarly, the documentation provides an example on how to activate popovers throughout the site.
Concise code snippet:

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

Remember to execute this code after loading Bootstrap's JS file, for example, bootstrap.bundle(.min).js

Note: With the new version v5 of Bootstrap, thorough understanding of the documentation is crucial as the framework offers more flexibility and involves significant changes.

I have tested the above code on your site to verify if this was the reason for tooltips and popovers not working, and here are the results:

https://i.sstatic.net/4J7M6.png

Answer 2

The current setup does not automatically enable tooltips and popovers everywhere in the code. You need to manually initiate it, as Bootstrap aims to provide more flexibility and avoid making assumptions about your website. However, this approach may change in the future.

For guidance on how to enable tooltips across the site, you can refer to their documentation.
Here is a more concise version of the code:

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

Similarly, the documentation provides an example on how to activate popovers throughout the site.
Concise code snippet:

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

Remember to execute this code after loading Bootstrap's JS file, for example, bootstrap.bundle(.min).js

Note: With the new version v5 of Bootstrap, thorough understanding of the documentation is crucial as the framework offers more flexibility and involves significant changes.

I have tested the above code on your site to verify if this was the reason for tooltips and popovers not working, and here are the results:

https://i.sstatic.net/4J7M6.png

Answer 3

Answer №2

Kindly organize the following links in the proper order:
1. bootstrap.min.js
2. 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 the 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>

Answer 4

Kindly organize the following links in the proper order:
1. bootstrap.min.js
2. 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 the 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>

Answer 5

Answer №3

In Bootstrap version 5.1, Popovers now require explicit enabling.

The bootstrap.bundle.min.js file contains popper.js, a third-party library essential for popover and tooltip functionality.

To enable Popovers and Tooltips, add the following script at the bottom of the body section:

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

For detailed information, visit the official documentation.

Answer 6

In Bootstrap version 5.1, Popovers now require explicit enabling.

The bootstrap.bundle.min.js file contains popper.js, a third-party library essential for popover and tooltip functionality.

To enable Popovers and Tooltips, add the following script at the bottom of the body section:

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

For detailed information, visit the official documentation.

Issues with Tooltips and Popovers in Bootstrap 5

Answer №1

Answer №2

Answer №3

Similar questions

Pause until the array is populated before displaying the components

Performing a single AJAX call from a JavaScript loop is more efficient than iterating through multiple AJAX calls

How can I style the options and optgroups of a select dropdown with CSS, focusing on padding and margins?

Implementing ng-if with asynchronous functions: A step-by-step guide

Upon reloading the page, the Vue getter may sometimes retrieve an undefined value

Unable to send a POST request to http://localhost:5000/api/createuser

Using Laravel and Vue to initialize authentication from the store prior to rendering any components

Increase the quantity with animation

Establishing the httppostedfilebase variable when validation is unsuccessful in an ASP.Net MVC view

Inform parent component about changes in child input using Angular

JkMegaMenu drop-down menus in Chrome are shifting to the left when the window is resized

Tracking the movement of a handheld device through GPS technology

Incorporating Numerous Location Pointers in Angular-google-maps

Implementing a JavaScript function with parameters onto an element using backend code

Performing a multitude of if statements simultaneously consistently results in an undefined outcome after the sixth iteration

Incorporate an external object not native to the Angular framework within a factory

What is the best way to turn off the annoying pop-up messages that show up for input validation, specifically the one that says "Please complete

What is the best way to include an icon before each option in a VuetifyJS combobox?

What is the best way to incorporate a fresh array into the existing array element stored in local storage?

Select2 using AJAX: chosen option disappears upon receiving AJAX response