工具提示不起作用 bootstrap 5 wordpress-gulp-starter-kit答案

【问题标题】：tooltips don't work bootstrap 5 wordpress-gulp-starter-kit工具提示不起作用 bootstrap 5 wordpress-gulp-starter-kit
【发布时间】：2021-10-31 00:29:28
【问题描述】：

我不明白为什么，但工具提示对我不起作用。

我的工作基于这个存储库https://github.com/oguilleux/webpack-gulp-wordpress-starter-theme

如果您需要更多信息，请回信。

我的 main.js 文件

import PopperJs from "./_popper";
import BootstrapPlugins from "./_bootstrapplugins";
import TinySlider from './_tinySlider';


const App = {
    /**
     * App.init
     */
    init() {
        //scripts init
        function initTinySlider() {
            return new TinySlider();
        }
        function initPopperJs() {
            return new PopperJs();
        }
        function initBootstrapPlugins(){
            return new BootstrapPlugins();
        }
        initTinySlider();
        initPopperJs();
        initBootstrapPlugins();
    }
};

document.addEventListener('DOMContentLoaded', () => {
    App.init();
});

我的 bootstrapplugins.js 文件

import {Dropdown , Tooltip} from "bootstrap";

class BootstrapPlugins {
    constructor() {
        this.dropdownInit();
        this.tooltipInit();
    }
    dropdownInit() {
        return Dropdown ;
    }
    tooltipInit(){
        return Tooltip ;
    }
}

export default BootstrapPlugins;

【问题讨论】：

标签： javascript wordpress webpack gulp bootstrap-5

【解决方案1】：

根据Bootstrap documentation，这是初始化工具提示的方式：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

如果我用 ES6 在 WP 主题中实现它，它会在你的 bootstrapplugins.js 中给出类似的东西：

import {Dropdown , Tooltip} from "bootstrap";

class BootstrapPlugins {
    constructor() {
        this.dropdownInit();
        this.tooltipInit();
    }
    dropdownInit() {
        return Dropdown ;
    }
    tooltipInit(){
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map((tooltipTriggerEl) => new Tooltip(tooltipTriggerEl));
    }
}

export default BootstrapPlugins;

【讨论】：