Solve - Bootstrap tooltips require Popper.js Error in JS

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

Solve - Bootstrap tooltips require Popper.js Error #

The "Bootstrap tooltips require Popper.js" error occurs when we use a Bootstrap tooltip, but don't include the popper.js script on the page. To solve the error, include the Bootstrap bundle script, before running your JavaScript code.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- โœ… load Bootstrap CSS โœ… --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> </head> <body> <!-- ๐Ÿ‘‡๏ธ Tooltip here --> <button id="myTooltip" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom" style="margin-left: 150px; margin-top: 150px" > Tooltip on bottom </button> <!-- โœ… load jQuery (optional) โœ… --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- โœ… load Bootstrap bundle โœ… --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" ></script> <!-- โœ… Your JS script here โœ… --> <script src="index.js"></script> </body> </html>

To use the functionality of the tooltips, we have to load the Popper.js script on the page.

The Bootstrap Bundle includes the Popper.js script for the functionality of tooltips, modals, dropdowns, popovers, etc.

Notice the order we loaded the scripts in:

  1. Load Bootstrap CSS on the page.
  2. Load the jQuery script (this is optional).
  3. Load the Bootstrap bundle.
  4. Run our own JavaScript file (index.js in the example)

Here's the code in the index.js file, where we added an event listener that logs a message when the tooltip is hidden.

index.js
const myTooltipEl = document.getElementById('myTooltip'); const tooltip = new bootstrap.Tooltip(myTooltipEl); myTooltipEl.addEventListener('hidden.bs.tooltip', function () { console.log('tooltip hidden'); }); tooltip.hide();

If you open the page in your browser, you'll see that the tooltip works as expected.

tooltip works

If you prefer to load the bootstrap.min.js and popper.min.js script separately, you can also do that, just make sure to place the popper.min.js script above bootstrap.min.js.

Here's the same example, however instead of using the Bootstrap bundle, we use the separate scripts.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- โœ… load Bootstrap CSS โœ… --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> </head> <body> <!-- ๐Ÿ‘‡๏ธ Tooltip code --> <button id="myTooltip" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom" style="margin-left: 150px; margin-top: 150px" > Tooltip on bottom </button> <!-- โœ… load jQuery (optional) โœ… --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- โœ… load popper.js โœ… --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous" ></script> <!-- โœ… load Bootstrap JS โœ… --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous" ></script> <!-- โœ… Your JS script here โœ… --> <script src="index.js"></script> </body> </html>

If you decide to use the separate scripts instead of the Bootstrap bundle, make sure to load the popper.js script before the bootstrap plugins script, especially if you're using tooltips, dropdowns, modals or popovers in your code.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee