The tooltip function seems to be disabled when I import Bootstrap using npm

I am facing an issue on my webpage related to including Bootstrap JS using npm. When I include it like this:

<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

the tooltip feature doesn't work properly. However, if I include Bootstrap JS like this:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdbc1dac1dc">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"gt;</script>

it works perfectly fine.

This is where the tooltip element is used:

<a href="#reserve-table" role="button" 
                data-toggle="tooltip" data-html="true" title="Or Call us at <br><strong>+852 12345678</strong>"
                class="btn btn-block btn-warning nav-link">
                    Reserve Table
                </a>

As a beginner in Bootstrap, I'm unsure why this happens and what is the best practice for including Bootstrap for optimal site loading speed. Any insights or recommendations are appreciated!

Update: I found a similar issue discussed here. The solution suggested was to use external resources for Bootstrap inclusion, which resolves the tooltip problem, but no explanation was provided.

Update: After replacing the file:

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

with:

<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

the issue got resolved, although the reason behind this change remains unknown to me.

Answer №1

It appears that there could be an issue with how you are integrating popper into your project, as shown by:

  1. The solution found in the combined Popper/Bootstrap import fixing the issue. As stated on Bootstrap's NPM page:

The bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper, but not jQuery.

  1. Your script src is node_modules/popper.js..., which points to a deprecated package. It might be advisable to use @popperjs/core instead. (Assuming there was a typo at the end of the src with 'poppor.js' and it should actually be 'popper')

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

Executing processes individually within AngularJS

Just making sure I understand correctly, I have a simple web service resource query function set up like this //Get country lists $scope.getCountry = function(){ $http({ method : 'GET', url : cdnLinks('country&apos ...

Transform the Nodejs server into a reusable Node module

Can a nodejs API server be transformed into a node module for use in other projects with minimal code modifications? Additional Information: The node js server contains various APIs (get, post, put). If I integrate this server as a node module within anot ...

Encountering difficulties integrating Bootstrap with Angular CLI project

I am facing an issue while trying to integrate Bootstrap 4 RC6 into my Angular CLI project. Despite following the necessary steps, I am encountering an error that I cannot quite explain. Here is a detailed overview of what I did to create the project: Fir ...

Is there a way to redirect a user back to the previous page once they have submitted a contact form?

My website is built in VB/asp.net 4 and there's a page where clients can click on "contact an engineer" which takes them to a contact form. Once they fill out the form, a message appears saying: Your message has been sent. Thank you for reaching out ...

Setting up the permanent class path for Nodejs in Linux Mint

Recently, I attempted to install Nodejs Version 6.9.4 on my Linux Mint system using the following steps: $ cd /tmp $ wget http://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.gz $ tar xvfz node-v6.3.1-linux-x64.tar.gz $ mkdir -p /usr/local/nodejs $ mv ...

The element is implicitly assigned an 'any' type due to the fact that an expression of type 'any' cannot be used to index types in nodejs and solidity

I am in need of setting networks in my contract using NodeJS and TypeScript. Below is the code I have written: let networkId: any = await global.web3.eth.net.getId(); let tetherData = await Tether.networks[networkId]; Unfortunately, I encountered ...

Error encountered: A syntax error occurred due to an unexpected token ":" found in the file path D:practise odejs odejs-demoviewsindex.html

Attempting to switch the engine view from .ejs to .html resulted in an error. After searching online, I was unable to find a solution for the following problems: Express 500 SyntaxError: Unexpected token : in D:\practise\nodejs\nodejs-demo& ...

Preserving information throughout an online browsing session

Is there a way to save the data about which buttons a user clicked on while visiting our website without using a database? The issue is that any array I use gets reset every time the user is redirected from the page. Note: I'm still learning PHP ...

The Jquery watermark extension in IE9 is capable of transmitting the watermark as the primary value of the form

I have integrated a plugin into my project. The plugin can be downloaded from this link. However, I am facing an issue where the watermark value is being submitted as the textbox's value in Internet Explorer 9. How can I resolve this problem? Intere ...

Starting the node server using the port value specified in the .env file results in an error when attempting to restart the server

I have built a simple node application and specified the port number in the .env file. However, I am encountering an issue where when using app.listen(process.env.PORT,()=>{}), the server runs successfully the first time but when attempting to run it ag ...

How to utilize the translateY() method to seamlessly shift concealed elements with no empty space

My goal is to create an interactive animation that reveals a specific section when a user clicks on an element. Initially, this section is hidden from view using the translateY(-700px) property. However, I have noticed that applying a transition effect to ...

Utilizing loop variables in ng-class and ng-click directive

This piece of code generates a list consisting of seven thumbnails, with the currently active image designated by the active and thumb classes. <div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]"> <img ng-src="images/{{no}}t.jpg" class="thumb" ng ...

How To Access a View by Clicking in Ionic Framework

I have designed the main screen shown below. When each link is clicked, it should open the corresponding view. https://i.sstatic.net/H84jt.png Here is what I have created so far: Main Screen <body ng-app="starter"> <ion-pane> < ...

Using the getElementById function in javascript to modify CSS properties

Here is the setup I am working with: <div id="admin"> This element has the following style applied to it: display: none; I am attempting to change the display property when a button is pressed by defining and utilizing the following JavaScript co ...

Avoid creating duplicates when combining an array of objects in Redux by updating the state array

Can someone help me with concatenating a setState array with a redux array in React? I have a configured list based on a setState array of objects and a location list based on a redux array of objects. When I add an item from the location list to the confi ...

How to insert an image into a placeholder in an .hbs Ember template file

I'm looking to enhance a .hbs template file in ember by incorporating an image. I am not a developer, but I'm attempting to customize the basic todo list app. <section class='todoapp'> <header id='header'> & ...

What is the best way to transfer attribute values from multiple elements and paste them each into a separate element?

I have multiple elements with the tag <a class="banner2">. Each of these elements has a different URL for the background image and href value. <a href="#" target="_blank" class="banner2" style="background-image:url('<?php echo get_templat ...

What is the process for importing a JavaScript file into a Vue component?

Having trouble importing JSON results into a Vue component? The results are as follows: [{"id":"d023c5e3-ca3c-4d97-933a-1112a8516eee", "score":9001, "updated":"2018-12-07T13:48:33.6366278", "player":Johanna, "category":Funny}, {"id":"398b65fb-e741-4801-b ...

Tips for creating seamless image transitions using a toggle button

My transition effect is working smoothly, but I am having trouble setting it up for the image. How can I resolve this issue? I attempted the following: var lightsOff = document.querySelector("#lights-off"); var lightsOn = document.querySelector("#lights-o ...

Unexpected failure when using FormData in Ajax callback for large files

I have a file upload control where I can upload various types of files. After getting the file, I store it in a FormData object and make an ajax call to my controller. Everything works well with images and small .mp3 files. However, when I try to upload .m ...