Bootstrap Popper

Bootstrap Popper is a JavaScript library that provides support for the Popper.js library within the Bootstrap framework. Popper.js is a positioning engine that allows for dynamic and complex positioning of elements on a web page.

What is Popper.js?

Popper.js is a positioning engine that allows for dynamic and complex positioning of elements on a web page. It calculates the position of an element relative to its parent, taking into account all of the constraints involved. This can include things like the size of the element, the position of the parent relative to the viewport, and any other constraints that are specified.

What does Bootstrap Popper do?

Bootstrap Popper provides the integration of the Popper.js library into the Bootstrap framework. This allows developers to add dynamic and complex positioning to their Bootstrap-based web pages with ease. With Bootstrap Popper, it is possible to position dropdown menus, tooltips, popovers, and more.

How to use Bootstrap Popper

To use Bootstrap Popper, first include the necessary dependencies in your project. This includes Bootstrap, jQuery, and Popper.js. Then include the Bootstrap Popper library itself. You can do this by downloading it from the Bootstrap website or by including it via a CDN.

<!-- Dependencies -->
<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/popper.js@2.9.3/dist/umd/popper.min.js" integrity="sha384-tHW1TX4s7GJfLZVSjKkO6YXU6PzU6UUyT6/tssjgqvFzdlg1lPUKM3jZp+0oII+" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QLPha/2m+2St/toIfM2yf5V7anIIv" crossorigin="anonymous">

<!-- Bootstrap Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Gux1GCQZ5lsRZk0tK1F8z3l+kcbPp/dzmkc/117PLgx8i3q32jSJpH86zN9X7V8+" crossorigin="anonymous"></script>

Once you have included the necessary dependencies, you can start using Bootstrap Popper. The easiest way to use it is to add the data-toggle="popover", data-toggle="tooltip", or data-toggle="dropdown" attributes to the element you want to position. Then, initialize the Bootstrap Popper library by calling $(document).ready(function() { $('[data-toggle="popover"]').popover(), $('[data-toggle="tooltip"]').tooltip(), $('[data-toggle="dropdown"]').dropdown(); }); at the end of your JavaScript code.

<!-- Example usage -->
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover"
   title="Popover on right"
   data-content="And here's some amazing content. It's very engaging. Right?" >
  Popover on right
</a>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<!-- Initialization -->
<script>
$(document).ready(function() {
  $('[data-toggle="popover"]').popover(),
  $('[data-toggle="tooltip"]').tooltip(),
  $('[data-toggle="dropdown"]').dropdown();
});
</script>

Conclusion

Bootstrap Popper provides a simple way to integrate the Popper.js positioning engine into the Bootstrap framework. By using Bootstrap Popper, developers can easily add dynamic and complex positioning to their Bootstrap-based web pages.