The tooltips in the WordPress-Gulp-Starter-Kit running on Bootstrap 5 do not seem to be functioning properly

I'm having trouble with tooltips not working properly.

The codebase I'm using is from this repository https://github.com/oguilleux/webpack-gulp-wordpress-starter-theme

If you need more details, feel free to reach out.

Here is my main.js file:

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();
});

And here is my bootstrapplugins.js file:

import {Dropdown , Tooltip} from "bootstrap";

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

export default BootstrapPlugins;

Answer №1

As per the Bootstrap documentation, initializing Tooltips can be done in the following manner:

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

To incorporate this into a WordPress theme using ES6, you would need to add the following code in your bootstrapplugins.js file:

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;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing a particular field value within an array of objects in Angular 4

I have a scenario where I created a class called security: class security { public id:number; public name:string; } Next, I initialized an array of security objects: let s:security[]=[{id:1,name:'Alex'},{id:2,name:'John'},{id:3,nam ...

Achieving dynamic page number display in relation to Pagination in ReactJS

I have a website that was created by someone else, and the pagination feature is becoming overwhelming for me as I am not a coder or developer. Image Link Currently, my navigation pagination displays 17 pages. I would like to limit this to only showing 1 ...

Error: The AJAX request encountered an unexpected token in the JSON response

I am working with the following code snippet: $.ajax({ dataType: 'text', url: '/_/js/answers.json', type: "GET", success: function (data) { alert(data); ...

Inquiry Concerning AJAX Frameworks Such as DWR

My web app currently relies on an AJAX library called DWR to dynamically fetch data. When a user clicks on certain table items, a DWR call is made to retrieve details for that item in the form of complete HTML code as a string. Behind the scenes, a Java me ...

What are some ways to customize the default Head tag in Next.js?

After using create-next-app to create a basic page, I decided to style the index.js page. I added a navigation bar within the header and now I'm trying to customize it. I've been wondering if there's a way to style the custom Head tag in Ne ...

Retrieving ng-model using ng-change in AngularJS

Here is an example of the HTML code I am currently working with: <select ng-model="country" ng-options="c.name for c in countries" ng-change="filterByCountry"></select> This HTML snippet is being populated by the following object containing a ...

Managing Time Before Browser Refresh in AngularLearn how to monitor and examine the time remaining before

In my Angular web application, I am facing an issue where the user's login status is lost every time the browser is refreshed or reloaded. I want to implement a feature that allows the login status to remain active for a short period of time after the ...

Tips for monitoring transactions/events on a particular wallet with ethers.js?

Is there a method to monitor all transactions labeled as "mint" occurring on a designated wallet using ethers.js? While I am aware of the option to establish a filter for tracking a particular event signature, my aim is to keep tabs on all "mint" events, e ...

Performing a password-protected JavaScript Ajax request that includes special characters

Within my JavaScript page, I have implemented an Ajax call shown in the code snippet below. The PHP page resides within a corporate intranet that demands domain authentication (without basic auth). To extract the username (u) and password (p), I am using j ...

Struggling to separate a section of the array

Check out this array: [ '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a171319121b1f163a1f1915080a54191517">[email protected]</a>:qnyynf', '<a href="/cdn-cgi/l/email-protection" class="__cf_e ...

On page load, refresh the content of the div based on the selected radio button values

My goal is to automatically collect the values of checked radio buttons when the page loads, rather than waiting for a user interaction like clicking a radio button. Below is the JavaScript code I am using: $(function () { updateDivResult(); $(&a ...

What is the method to obtain the content height of individual pages in Android, with or without the use of JavaScript?

I am facing an issue while trying to retrieve the content height of each webpage consecutively. When I load pages separately, I can successfully get the height of each page. However, when I attempt to fetch the content height continuously for webpages in a ...

Implementing a JavaScript function that directs to the current page

I have set up my index page with a link that looks like this: <li onClick="CreateUser()"> <a href="#CreateUser">CreateUser</a> </li> When the "Create User" list item is clicked, the main page content is populated as follows: fun ...

Is the data fetched by getStaticProps consistently the same each time I revisit the page?

When utilizing routes to access a specific page like page/[id].js, the concern arises whether data will be refetched each time the page is visited. For instance, if you navigate to another page through a link and then return to this original page by pres ...

javascript monitoring numerous socket channels for echoes

Currently, I am in the process of developing a chat application. On the server side, I am utilizing: php, laravel 5.4, and pusher. On the client side, I have incorporated vue.js along with laravel-echo. Initially, I successfully created a "public chat roo ...

Session is required for req.flash() function in node.js to work properly

I recently started working with Node.js and I'm encountering an issue with sessions. I developed a simple application and tried to run it locally, but ran into some errors. Below are the details of my code along with the error messages: BAPS.js (app. ...

The app's connection issue persists as the SDK initialization has exceeded the time limit

We are currently facing an issue when trying to publish a new manifest for our app in the store. The Microsoft team in India is encountering an error message that says "There is a problem reaching the app" during validation. It's worth noting that th ...

What is the best way to switch focus to the next input using jQuery?

Currently, I am implementing the autocomplete feature using jQuery and everything seems to be functioning properly. The only issue I've encountered is with Internet Explorer (IE) - when a user selects an item from the autocomplete list, the focus does ...

Using the max-width property with Semantic UI Dropdown in ReactJS

I'm struggling to determine how to adjust the max-width of the Dropdown element in ReactJS. I attempted the following: .Menu Dropdown { max-width: 5rem !important; } Unfortunately, this did not work as expected. The dropdowns are taking up too m ...

Webpack: Live reloading is not functioning properly, however the changes are still successfully compiling

Could someone help me understand why my React application, set up with Webpack hot reload, is not functioning properly? Below is the content of my webpack.config.js: const path = require('path'); module.exports = { mode: 'development&apo ...