0

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/

user31782
  • 7,087
  • 14
  • 68
  • 143
  • The [documentation](https://getbootstrap.com/docs/5.1/components/tooltips/#options) doesn't mention anything about using a modifier function that way. Where are you getting this from? – kmoser Sep 20 '22 at 04:38
  • @kmoser I am using the actual popper plugin functionality https://popper.js.org/docs/v2/modifiers/ – user31782 Sep 20 '22 at 05:04

1 Answers1

1

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 Hardaha
  • 2,411
  • 1
  • 7
  • 16
  • This has disabled the default popper configs from data attributes. How can I use this with defaultBsPopperConfig, i.e. how can I return new popperConfig that includes modifiers? – user31782 Sep 20 '22 at 05:09
  • You'll have to function in that case. read the [documenation](https://getbootstrap.com/docs/5.1/components/tooltips/#options) on `popperConfig` they have proper description about it. – Vijay Hardaha Sep 20 '22 at 05:12
  • 1
    Yes, thanks bud, it worked like this: `var tooltip = new bootstrap.Tooltip(exampleEl, { popperConfig: function (defaultBsPopperConfig) { // var newPopperConfig = {...} // use defaultBsPopperConfig if needed... // return newPopperConfig //add modifers to defaultBsPopperConfig defaultBsPopperConfig.modifiers.push(topLogger); return defaultBsPopperConfig; }, });` – user31782 Sep 20 '22 at 05:15