工具提示不起作用 bootstrap 5 wordpress-gulp-starter-kit
tooltips don't work bootstrap 5 wordpress-gulp-starter-kit
我不明白为什么,但工具提示对我不起作用。
我的工作基于此存储库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;
根据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;
我不明白为什么,但工具提示对我不起作用。
我的工作基于此存储库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;
根据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;