Issue with Bootstrap Tool-Tip Persisting During Page Scroll Across Various Versions of Internet Explorer

Encountering a problem in IE versions 8 to 11.

  1. Hover over a label (etc) with a tooltip enabled
  2. Scroll the page using the mouse wheel without moving the mouse
  3. Notice that the tooltip does not close in IE 8 to IE 11

While scrolling down and reaching the second label with a tooltip, it still shows the previous label's tooltip instead of the new one. Though minor, I am actively working on fixing it. Has anyone successfully resolved this issue before?

This works fine in Firefox, Chrome, and other popular browsers.

Also posted on GitHub.

The issue can also be observed on the Bootstrap website.

Answer №1

After conducting some tests, it was discovered that the issue persists not only in IE but also in Chrome. Interestingly, the problem in Chrome is resolved by clicking on the tooltip, whereas in IE this solution does not work.

Upon further investigation, it became apparent that both browsers fail to register a mousemove event while scrolling. As a result, when hovering over the tooltip and then scrolling up or down, the tooltip remains visible. In Chrome, clicking on the tooltip triggers a mouseevent which subsequently causes a mouseout/mouseenter event upon scrolling. However, IE does not exhibit this behavior, indicating that the issue may lie in how bootstrap manages the addition of a "scroll equals mousemove" trigger.

To verify this behavior, one can experiment by adding a mouse move event in the console for bootstrap's website/tooltip.js:

$(document).mousemove(function(event) {console.log(event);});

Moving the mouse should generate events in the console. Hovering over the tooltip and then scrolling away will still keep it visible. Clicking on the tooltip will reveal that scrolling now activates the same mouse event in Chrome but not in IE.

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

Employing JavaScript to insert a JSON value as a parameter in an HTML element's attribute

In a JSON file, I have "img" properties with .jpg file paths as their values (e.g "images/image.jpg"). I am attempting to insert these values into the 'src' attribute of existing HTML elements. Below are my attempts so far: I tried creating te ...

Transferring an array from PHP to jQuery

How can I pass an array from PHP to jQuery within the same file? I have an array named $array2 with data that I want to use to create a graph. The code below is currently using predefined chartData, but I would like to use a variable from my PHP script i ...

Transform PHP array into a JavaScript array

Currently, I am using Laravel and retrieving a list of values from a database with the following code: $idordenes = DB::table('ordenes')->select('id')->get(); Upon echoing the idordenes variable, the output is as follows: [{"fa ...

Encountering difficulties when trying to set up popovers in Bootstrap

I'm currently working on enhancing an Angular application developed by someone else. My task involves adding a popover feature. The HTML code is located within an ng-include template and includes the following tag: <p class="filetracker-label" dat ...

Creating dynamic input forms in PHP

New to PHP and seeking guidance! I'm in the process of creating a photography website and encountering an issue with a specific page. Essentially, I need this page to display a form with a varying number of inputs. The goal is to have a dynamic visua ...

Using R Markdown and Hugo to Style Blog Titles

I am currently utilizing Hugo and Blogdown to craft a blog following the guidelines outlined here. The title of my blog is specified at the beginning of each post, resembling the example below: --- title: One Two Three author: First Last date: '2019- ...

Trouble with visibility of Bootstrap navbar collapse button

While creating an application using bootstrap, I encountered a problem with the navigation bar. The issue is that when I resize the page, the links disappear and the toggle button fails to show up. Below is my current navigation bar code: <link rel= ...

Attempting to fill a template using ngfor, wherein the initial 2 elements are displayed in a row

I am attempting to complete a task where, using an ngFor directive to iterate through an array, I need to display the first 2 elements in a row and the remaining elements in a descending column. It should look like this: first second third fourth fifth ...

You will need to return a string instead of a Json Object in order for it to function correctly

I am facing an issue where I need to return a list of json objects to the view, but it seems to be causing problems because it's being returned as an object. It works fine if I return a string or a list of strings instead. However, what I really need ...

Building a loading spinner component in a react-native project

I have successfully implemented a loading spinner that is currently being used in various components of my React project. However, as I am now working on a react-native version of the application, I am faced with the challenge of recreating this loading sp ...

Looking to deactivate a particular checkbox in a chosen mode while expanding the tree branches

I encountered an issue with a checkbox tree view where I needed to disable the first two checkboxes in selected mode. While I was able to achieve this using the checked and readonly properties, I found that I could still uncheck the checkboxes, which is no ...

Creating an onchange event in CodeIgniter for dynamically generated select boxes within a view script

As a beginner with codeigniter, I am seeking some assistance. Within my controller, I retrieve data for both options and suboptions, then load the respective view using the code below. The view essentially generates a table consisting of select boxes passe ...

Unable to show the company logo in the navigation bar

Working on a pizza site and encountering an issue - trying to add the logo of the place to the navbar (which also links to the main page) but it's not displaying. Using Twitter Bootstrap for this project. Here is the code snippet: /*#557c3e green*/ ...

Can the information from a form be automatically submitted to the server upon selection?

<div class="modal-body modal-body-step-2"> <form action="prenotazioni.php" method="post"> <div class="input-group"> <input type="radio" name="spettacolo" value="Lo Schiaccianoci">Lo Schiaccianoci<br> ...

How to create a personalized button within a row in jqGrid?

I am trying to create a basic table with a customized button in one of the rows. The goal is to trigger an 'alert' message when the button is clicked. Despite reading various resources like this post and this other post, I am still facing issues ...

Using HTML5 datetime-local to only accept dates in the format Y-m-d

I am currently working on a form that includes a datetime-local input field. <input type="datetime-local" id="datetime" /> After clicking on the today button, the date is automatically set to today's date like this: 2018-11-05 --:-- However ...

Tips for quickly navigating to filter results on a page using jquery

In order to display addresses of laboratories based on parameters such as regions and profile, I have utilized a clickable map and menu. (Visit the site for reference: ) The issue I am facing is how to ensure that when clicking on a region, it smoothly ju ...

Steps to troubleshoot a scrollbar problem while applying flexbox in CSS

I'm currently working with a front-end framework that utilizes a flex layout. In my development of an admin page, I have included sections for the sidebar, header, and main. My objective is to ensure that the sidebar and the header + main sections fun ...

Guide to implementing an AJAX loader during page load in PHP

Can anyone assist me in creating a page loader for when the page is loading? I am working on implementing a PayPal payment system. I have noticed that some pages display a loader (ajax loader) while directing to the PayPal gateway. I also want to add an ...

What is the best way to eliminate the input border?

click here for image I'm currently working on designing a straightforward login page. However, I've noticed that there are black borders around the input fields. Can anyone help with how to remove these borders? ...