Having Trouble with Bootstrap 4: "Encountering Uncaught Error: Tooltip Transition in Progress"

I'm currently utilizing Bootstrap 4 on my website and incorporating the Tooltip feature. While my JavaScript appears to be correctly formatted, there are instances where I encounter errors in Console.

My Javascript Setup | Bootstrap 4

<script src="vendor/assets/js/jquery.min.js"></script>
<script src="vendor/assets/js/jquery.easing.min.js"></script>
<script src="vendor/assets/js/tether.min.js"></script>
<script src="vendor/assets/js/bootstrap.min.js"></script>

Code for Tooltip Implementation

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});

Encountered Error Message in Console

bootstrap.min.js:7 Uncaught Error: Tooltip is transitioning
   at h.hide (bootstrap.min.js:7)
   at h._leave (bootstrap.min.js:7)
   at HTMLAnchorElement.<anonymous> (bootstrap.min.js:7)
   at HTMLAnchorElement.dispatch (jquery.min.js:3)
   at HTMLAnchorElement.r.handle (jquery.min.js:3)
   at Object.trigger (jquery.min.js:3)
   at Object.simulate (jquery.min.js:3)
   at HTMLDocument.c (jquery.min.js:3)
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

From what I understand, adding the attribute data-animation="false" to HTML elements can help prevent a rapid hovering error.

Here's my proposed solution, please review and see if it works:

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<section>
  <h3>Interactive demo</h3>
  <p>Using the Bootstrap v4.0.0-alpha.6</p>

  <!-- Tooltip -->
  <button id="query-button" type="button" class="btn btn-outline-info" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Analyse" data-trigger="hover" data-animation="false">
    <i class="fa fa-search" aria-hidden="true"></i>
  </button>

  <button id="next-button" type="button" class="btn btn-outline-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Previous" data-trigger="hover" data-animation="false">
    <i class="fa fa-angle-left" aria-hidden="true"></i>
  </button>

  <button id="previous-button" type="button" class="btn btn-outline-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Next" data-trigger="hover" data-animation="false">
    <i class="fa fa-angle-right" aria-hidden="true"></i>
  </button>

  <button id="download-button" type="button" class="btn btn-outline-success" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Download CSV File" data-trigger="hover" data-animation="false">
    <i class="fa fa-download" aria-hidden="true"></i>
  </button>
</section>

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

Arranging DIV elements into rows and columns within a table

After working all night to fix a problem, my goal is to create this timetable: https://i.sstatic.net/dAt1J.png Specifically, I'm struggling to find a solution for rows 5, 6, and 7 in the first column. The image is from a program that only runs in IE ...

phphtmlcssbootstrap-4

Tips for creating a column with add, edit, and delete buttons in PHP

I found this code on a website that handles pagination and search functionality. However, I am looking to enhance it by adding an icon or button in a column that will allow users to link to the edit and delete functions for specific data selected in the ta ...

javascriptphpajax

Is the on.click event fired before the ajax request is made?

Having two events, the second one initiates an Ajax call. When a click creates an input in the <td>, it gets replaced by the success event afterwards - ensuring that the input is correct upon blur. $(document).on("click","#"+table_id+" td",function( ...

javascriptjqueryajaxevents

Perform a single click and a double click on an anchor element in the document

I am attempting to implement two actions when a user clicks on an anchor tag. The anchor tag will contain a video link. My goal is for the URL to open in a new window when the user single-clicks on the anchor tag, and for the use of the HTML5 download attr ...

javascriptjqueryhtml

How can I ensure my function waits for a promise to be resolved using Async / Await?

I'm running into an issue where I want my function to keep executing until the nextPageToken is null. The problem occurs when the function runs for the first time, it waits for the promise to resolve. However, if there is a nextPageToken present in th ...

javascripttypescriptasynchronousasync-await

What is the best way to insert horizontal padding into each line of a single sentence that is wrapped on multiple lines

Below is the code snippet I am working with: <div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div> Here is a screenshot of how it currently appears: I am looking for a way to add paddi ...

csshtml

Angular - automated pagination functionality without requiring user input

I apologize for the poorly worded title. Context In my static display angular app, I am not incorporating any user interactions and most actions are time-based. The page loads, and after a specific amount of time determined by certain elements, it reload ...

javascriptjqueryangularjspagination

What is the most effective method for merging two arrays in JavaScript?

Can a function be created to generate an array like the following? ["0-AA", "0-BB", "1-AA", "1-BB", "2-AA", "2-BB", "3-AA", "3-BB"] This particular function combines two array ...

javascripttypescript

The AJAX response consists of HTML content from the page rather than just a singular value

I have a 'like' button set up using PHP/MySQL, AJAX and jQuery to increase likes by +1 each time it is clicked. The functionality works correctly and updates the database with the new value as expected. However, after the AJAX call, I am receivin ...

phpjqueryajax

There was an error: "TypeError: Unable to access the equipmentImage property of

Help needed! I am encountering a strange error while trying to upload an equipment image from postman as form data. The error states: Type Error; Cannot read property equipmentImage. I am using express-fileupload for the image upload process. Can someone ...

javascriptnode.jsexpresspostman

Utilizing Chained Conditions in React JSX

Although the code below is functional and yields the desired outcomes, I can't help but question if there's a better way to do it. { Conditon1?<ChildComponent />:Condition2?<p>Hi</p>:<p>Bye</p> } I'm partic ...

javascriptreactjsreduxjsxcreate-react-app

Adjust the position by changing the left property during dragging

Whenever I try to update the left property of a ul element while dragging, it unexpectedly jumps to -1980 as soon as the drag action begins. $('#draggable').on('drag', function() { var start = 0; var end = 2000; while (st ...

jquery

Laravel error message for unresolved symbolic link

Previously, I had developed a form for uploading profile pictures using the code snippet below, $image = $request->file('avatar'); $pass = Hash::make($request->password); if($image!=null){ $avatar_na ...

phphtmllaravel-6

Utilize Wordpress TinyMCE to apply the underline decoration using the "U" tag instead of the style

Is there a way to modify the function of the button in the WordPress content textarea of TinyMCE? Specifically, I am referring to the "u" button for underline formatting. <span style="text-decoration-line: underline;">text underlined</span> I ...

htmlwordpresstinymceeditor

Error is thrown when attempting to access nested elements using GetElementsByClassName within the window.onload function

I have a funky looking table on my webpage, here's an example: <body> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Product name</th> <th>Product ...

javascript

Ways to retrieve textStatus beyond ajax boundaries

Do you know how to access the textStatus variable after an ajax call? I need to use this variable in an if condition. Can anyone provide assistance? $this->registerJs("colorArray = ['#ff4c4c','#32CD32']; $('.grooveTable&apo ...

javascriptajax

Image set as the background on a website

I recently started working with Groovy and Grails, designing my own personal website. I'm looking to set an image (located in the asset folder) as the background for my index.gsp page. How can I achieve this? ...

htmlcssgrailsbackground-image

Tips for implementing a delay in jQuery after an event occurs

I am working with text boxes that utilize AJAX to process user input as they type. The issue I'm facing is that the processing event is quite heavy. Is there a way to make the event wait for around 500ms before triggering again? For example, if I type ...

javascriptjquery

Ways to position cursor at the end in the Froala Editor

My current dilemma involves the need to position the focus/cursor at the end of text that is loaded within the Froala editor. I attempted to accomplish this using the focus event of Froala (events.focus), but unfortunately, it did not yield the desired out ...

javascriptjquerycursoreditorfroala

Having issues with django-autocomplete-light triggering JavaScript errors

My implementation of django-autocomplete-light is causing some issues with rendering autocomplete options. There is a section on the website where it functions perfectly, but in another section, it only works partially. The autocomplete options display c ...

javascriptdjangodjango-autocomplete-light