Bootstrap 5是否提供Popper.js全部功能？Tooltip修饰器失效问题咨询

我想在页面滚动导致Tooltip位置变化时执行自定义操作，但尝试使用Popper 2的Modifiers打印日志却没生效。具体场景是：滚动到页面底部后点击触发Tooltip，再次滚动时Tooltip会从右侧切换到顶部，但自定义的修饰器函数完全没执行，怀疑Bootstrap没有暴露Popper.js的全部功能。

我的代码如下：

JavaScript #

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],
});

CSS #

span {
  margin-left: 100px;
}

HTML #

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

原因分析 #

Bootstrap 5对Popper做了封装优化：默认情况下，滚动导致Tooltip位置调整时，Bootstrap仅调用Popper的轻量化更新逻辑，不会完整触发所有自定义Modifiers的执行流程。同时你的Modifier配置的phase: 'main'时机不对，无法捕捉到滚动后的位置切换事件。

解决方案 #

方案1：获取Popper实例，监听位置更新事件 #

Bootstrap Tooltip显示后，会在实例上暴露内部的_popper对象，你可以直接操作这个Popper实例添加自定义逻辑：

var exampleEl = document.querySelector('[data-bs-toggle="tooltip"]');
var tooltip = new bootstrap.Tooltip(exampleEl);

// 监听Tooltip显示完成事件
exampleEl.addEventListener('shown.bs.tooltip', function() {
    const popperInstance = tooltip._popper;

    // 添加自定义Modifier，监听位置变化
    popperInstance.modifiers.push({
        name: 'positionChangeLogger',
        enabled: true,
        phase: 'afterMain', // 位置计算完成后执行
        fn({ state }) {
            if (state.placement !== state.previousPlacement) {
                console.log(`Tooltip位置从${state.previousPlacement}切换到${state.placement}`);
                if (state.placement === 'top') {
                    console.log('Popper is on the top');
                }
            }
        }
    });

    // 或者直接监听Popper的update事件
    popperInstance.on('update', () => {
        console.log('当前Tooltip位置:', popperInstance.state.placement);
    });
});

方案2：手动监听滚动，强制触发Tooltip完整更新 #

通过监听页面滚动事件，主动调用Tooltip的update()方法，强制Popper重新计算位置并触发所有Modifiers：

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

var exampleEl = document.querySelector('[data-bs-toggle="tooltip"]');
var tooltip = new bootstrap.Tooltip(exampleEl, {
    modifiers: [topLogger],
});

// 监听页面滚动
window.addEventListener('scroll', () => {
    // 仅当Tooltip显示时执行更新
    if (tooltip._isShown) {
        tooltip.update();
    }
});

内容的提问来源于stack exchange，提问作者user31782