Does bootstrap 5 css framework provide all functionality of popper js?

user31782 0
Viewed 19

I am trying to modify certain things when the tooltip placement changes on scrolling the page. I can't figure out why I can't use all functionality of popper 2 js plugin.

I have tried the following, where I use Modifiers to console log when tooltip placement changes

const topLogger = {
    name: 'topLogger',
    enabled: true,
    phase: 'main',
    fn({ state }) {
        console.log('Popper is on the top');
    },
};

var exampleEl = document.querySelector('[data-bs-toggle="tooltip"]');
var tooltip = new bootstrap.Tooltip(exampleEl, {
    modifiers: [topLogger],
});
span {
  margin-left: 100px;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    
    <title>Hello, world!</title>
  </head>

  <body>
  <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
  
   <span class="text-decoration-none toolip-link" data-bs-animation="true" data-bs-trigger="click" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-html="true" data-bs-title="This is dummy content to be show in the tooltip">Click Me</span>
  <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

   </body>
</html>

If you scroll all the way then click and then scroll again, the tooltip shifts from right to top, but the modifier function doesn't get executed. I have a feeling that bootstrap doesn't provide all the funcitonality of popper js plugin https://popper.js.org/

popper.js twitter-bootstrap javascript css html
1 Answers

Bootstrap has popperConfig property to for popper configurations.

according to that, your code should be like this:

var tooltip = new bootstrap.Tooltip(exampleEl, {
  popperConfig: {
    modifiers: [topLogger]
  },
});
Vijay Hardaha0
Related