基于webpack-gulp WordPress starter kit的Bootstrap 5 tooltips不生效问题求助

问题根因 #

你当前的代码仅导入了Bootstrap的Tooltip类，没有执行实际的初始化绑定操作。Bootstrap 5的Tooltips组件不会自动挂载到DOM元素上，必须手动初始化。你写的tooltipInit方法仅返回了Tooltip构造函数，没有遍历页面中需要绑定Tooltip的元素进行实例化，这是功能失效的核心原因。

修复方案 #

1. 修正_bootstrapplugins.js文件的逻辑，补充Tooltip的初始化代码，如果需要Dropdown正常工作也可以同步补充对应初始化逻辑，修正后代码如下：

import {Dropdown , Tooltip} from "bootstrap";

class BootstrapPlugins {
    constructor() {
        this.dropdownInit();
        this.tooltipInit();
    }
    dropdownInit() {
        // 初始化所有Dropdown元素
        document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(dropdownEl => {
            new Dropdown(dropdownEl)
        })
    }
    tooltipInit(){
        // 初始化所有Tooltip元素
        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => {
            new Tooltip(tooltipEl, {
                // 可自定义配置参数，比如触发方式、延迟等
                trigger: 'hover focus'
            })
        })
    }
}

export default BootstrapPlugins;

2. 确保页面中需要使用Tooltip的元素已经添加了正确的属性，示例如下：

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="这是Tooltip提示内容">
  示例按钮
</button>

其他排查点 #

如果修改后仍无法正常工作，可检查：

• Popper.js是否正常加载（Tooltip依赖该库，你的代码中已经单独引入，注意加载顺序要早于Bootstrap插件）
• 页面DOM元素是否在Tooltip初始化执行前已经渲染完成，你当前用了DOMContentLoaded事件触发初始化，顺序是正确的。

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