The tooltip failed to disappear even after clicking on the element (bootstrap v5.0)

After updating from Bootstrap version 4.5.x to 5.0.1, I made changes to how tooltips were initialized. Previously, it was done using 

$('[data-toggle="tooltip"]').tooltip({trigger: 'hover'});
, but now it is done differently as shown below:

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

However, I encountered an issue where the tooltip remains visible even after clicking on the element. In version 4.5.x, this was resolved with 

$('[data-toggle="tooltip"]').tooltip("hide");
, but this method no longer works in version 5.

I attempted the following solutions:

let tooltipElement = document.getElementById('myElementwithTooltip');
let tooltip = bootstrap.Tooltip.getInstance(tooltipElement);
tooltip.hide();
// or
tooltip.dispose();

Unfortunately, these methods did not fully resolve the issue. On my website, I have numerous tooltips that serve different purposes such as opening dialogs or providing descriptions for column headers in a datatable plugin with sorting functionality.

The tooltips on the Bootstrap website exhibit the same behavior. Any suggestions or ideas would be greatly appreciated.

javascripttooltipbootstrap-5popper

Answer №1

To display the tooltip when hovering, remember to set hover as the trigger option.

let tooltipTriggers = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltips = tooltipTriggers.map(function (tooltipTrigger) {
    return new bootstrap.Tooltip(tooltipTrigger, {
        container: 'body',
        trigger : 'hover'
    });
})

This method will prevent any potential clicking issues.

View Sample Code

Furthermore, using hide() in the way demonstrated won't be effective unless it's linked to an event handler.

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

The utilization of the JavaScript null coalescing operator ?? resulted in a crash of the .NET JS minifier/bundler

I'm facing an issue with my code where using the ?? operator causes a crash in the MVC built-in bundler/minifier. The problematic line is: span.textContent = typeof (info) === 'object' ? info.column.caption ?? info.column.dataField : info; ...

javascriptasp.net.netasp.net-mvcbundling-and-minification

What is the best way to prevent content from jumping around on a webpage?

After implementing a sticky header on scroll, I encountered an issue. When scrolling down by 1000px, the 'sticky' class is added to the header causing a slight jump in the content. This may be due to the header no longer visually existing in that ...

javascriptjquerycss

Transfer the document to the server using ajax

I've been attempting to upload an image to the server using the following simple code: <form enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <progress ...

javascriptjqueryajaxhtmlupload

What is the most effective method for verifying a selected item in Jquery UI selectable?

I'm having an issue with my image display div where users can delete selected images. The code functions correctly, but there seems to be unnecessary repetition in certain parts of it. I attempted using `$(".ui-selected").each()` to stop the ...

javascriptjquery

Exploring Angular Route Configurations: Utilizing Multiple Outlets with Path as an Array of

In my Angular9 application, I have configured hundreds of routes paths. Is there a way to use multiple outlets with a single array of string paths? Current Code: const routes: Routes = [ { path: 'Data/:EntityID/:Date', compon ...

javascriptangular

Having trouble getting the on:dblclick event to trigger on a row within a list using S

I am currently using Sveltestrap and I am in need of a double click handler for a row: <ListGroupItem on:dblclick={handler(params)}> <Row> <Col><Icon name=........</Col> ... </Row> </ListGroupItem> Int ...

javascripthtmlonclicksvelte

Challenges with text in a Bootstrap 5 responsive carousel

I'm currently in the process of developing a new website and I am utilizing bootstrap 5. One issue I have encountered is that the text and button within the carousel in the header section do not appear to be compatible. To provide better clarity, I wi ...

htmlcsscarouselbootstrap-5

Is there a way in JavaScript to disable a function's functionality?

I am dealing with a function that includes an if statement and an onclick function. My goal is to prevent the entire function from running if the if statement evaluates to true. I have attempted using return false, but it did not yield the desired outcom ...

javascriptecmascript-6vue.jsfrontend

``When executing the `npm install` command, it does not install the sub-dependencies of a local package

I am facing an issue with my packages. One package named package-a has a dependency on another package called package-b which is not published on npm but resides in my file system. When I try to run npm install from the directory of package-a, the dependen ...

javascriptnode.jsnpmnpm-install

Tips for discovering the index value of a two-dimensional array in JavaScript

I am working with a 2D array that is structured as follows: var numbers=[[1,2,3,4,5],[6,2,3,5,5],[9,8,3,4,9]] Is there a way to determine the index value of elements in this two dimensional array? ...

javascriptarrays

What is the best way to transfer a variable from a node server to a javascript client when the page is first

My web application is mainly static, but I need to dynamically send the user's username if they are logged in and the room name they specify in the URL to the client-side JavaScript upon page load. Finding a simple solution has been challenging for me ...

javascriptjquerynode.jsexpresscookies

Generate a sequence of years without relying on the range function

Is there a different approach to generating this array without relying on the range function? Below is an illustration of what I want, but without utilizing the range method. const years = myCustomArrayGeneration(1990, getYear(new Date()) + 1, 1); ...

javascriptarraysreactjs

Tips on retrieving a <list> from an MVC controller and passing it to the view with jQuery and AJAX

How can I retrieve a list from an MVC controller to a view using jQuery AJAX without getting the error message [object Object]? Here is my AJAX code: $.ajax({ type: 'POST', contentType: 'application/json; ch ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-4

The error message "window is not defined" is commonly encountered in Next

Having some trouble with using apexcharts in a next.js application, as it's giving me an error saying 'window is not defined'. If anyone has any insights or solutions, I would greatly appreciate the help. Any ideas on what could be causing ...

javascriptreactjstypescriptnext.jsapexcharts

Can npx react-native link be utilized in conjunction with Expo?

I'm having trouble linking some files in my project using "npx react-native link". It was working fine with react-native but now that I'm using expo, it's not allowing me to do so. Please feel free to ask if you need any more information. ...

javascriptreactjsreact-nativeexpo

Omit a specific page from the primary Next.js layout within the application directory

In my project, I have a main layout file located at /app/layout.tsx and separate authentication pages. I want the authentication pages to have their own custom layout defined in the file /app/auth/layout.tsx. The issue I am facing is that the main layout ...

javascriptreactjsnext.js

The data in the second run of the jQuery datatable does not refresh successfully

I have encountered an issue while trying to load data from the server. It works perfectly on the initial load, but upon reloading, it fails to function. Please bear with me as this is a legacy project. Even after attempting a normal call and refreshing th ...

javascripthtmljquery

How to create a manual mock for @material-ui withStyles in React using Jest

I have been experimenting with creating manual mocks for the @material-ui/core/styles module, specifically targeting the HOC known as withStyles. Initially, using an inline mock with jest.mock function worked flawlessly. However, when attempting to reloca ...

javascriptreactjsmockingjestjsmaterial-ui

Automatically bypassing git conflicts in package.json: A step-by-step guide

We encounter frequent updates to shared npm packages in our app, resulting in multiple pull requests updating the same package version. Consequently, conflicts arise on GitHub when these pulls are merged into the master branch. Is there a way to automati ...

javascriptgitgithubnpm

What is the best way to determine the midpoint index of an array?

As a newcomer, I have a question regarding a recent assignment. The task involves creating a global array where objects are imported as they are entered into an input field on the HTML document. The challenge is to update the current list on the document ...

javascripthtmlarraysindexing