Turning away swiftly from a popover triggered by hovering does not automatically conceal the popover

When utilizing hover-triggered popovers for specific highlighted rows within a table, I noticed an issue. If you scroll away quickly using the mouse wheel, the popover remains visible for an extra second even though you are no longer hovering over the target element. This creates an odd effect where the popover moves in the opposite direction of your scrolling, eventually extending beyond the table's border.

Below is an example code snippet:

 $('.popover_class').popover({
   trigger: 'hover',
   placement: 'right'
 })
<tr class="bg-warning popover_class" data-toggle="popover" data-content="example"></tr>

I have tried implementing various solutions, such as hiding the popover on a scroll event after initializing it with the provided code:

$('.popover_class').on('scroll', function() {
      this.popover('hide');
});

This project utilizes bootstrap 4, popper.js 1.15, jquery 3.4, and DataTables.

Thank you.

javascriptjquerycssbootstrap-4popper.js

Answer №1

To prevent a CSS fade transition from being applied to the popover, simply set the popover animation to false (which is true by default).

 $('.popover_class').popover({
   trigger: 'hover',
   placement: 'right',
   animation: false
 });

Attempting to hide the popover on mouse scroll will not work as intended, since the animation effect will still be triggered regardless.

Answer №2

While working with a JQuery DataTable control, I encountered a similar issue when trying to display a Bootstrap popover.

https://i.sstatic.net/XZLJx.png

In the image above, you can see that the popover message appears when the user clicks on the clipboard icon. However, the problem arises when the popover doesn't hide when clicking outside of the DataTable scrollbar. It remains visible even when scrolling through the table.

https://i.sstatic.net/Qi4xn.png

To address this issue, I implemented the mouseleave event on the clipboard icon using the following code snippet:

    $(tableId).off('mouseleave', '.btn-clipboard').on('mouseleave', '.btn-clipboard', function (event: JQueryEventObject) {

        if (event.currentTarget) {
            let controlId = event.currentTarget.id;
            $('#'+controlId).popover("hide");
        }
    });

This code ensures that when the mouse moves away from the clipboard icon image, the popover will automatically hide. This solution may prove helpful or offer some insights for your scenario.

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

What steps can be taken to create a curved bottom for the header section?

While I've seen this question asked before, I'm not satisfied with how the design has been implemented. Here is my desired look for the curved header I've experimented with border radius left and right, but the edges are excessively rounde ...

htmlcss

Ways to showcase the outcome of a spin after each rotation

I am currently working on a spinning code snippet that allows users to spin and potentially win different amounts. The code includes functionality to prevent more than 3 spins, set random rotation values, and animate the spinning effect. However, I now wa ...

javascripthtmljquerycss

What is the method to adjust the duration of a transition for an element using JavaScript?

If I have an element with the following CSS properties: .element{ /* some css properties */ transition-duration:1.5s; transition-delay:.1s; } When triggering it by hovering over another element, I want it to enter with the specified duration and d ...

javascripthtmldom-eventscss-transitions

Encountering a NoSuchElementException when transitioning from frame[0] to window[1] in Firefox GeckoDriver using Selenium with Python

Encountered an issue with the Firefox GeckoDriver browser where I receive an error stating `element not found`. The problem arises when I navigate from window[1] to frame[0], back to window[1], and then attempt to click the close frame button. I prefer u ...

javascriptpythonseleniumgeckodriverfirefox-marionette

Analyzing Passwords for Redirection

Greetings to all! I trust everyone is doing well. I have developed a react application that features 2 password fields, each with validation using regular expressions. Upon successful validation of both passwords, the application will automatically redirec ...

javascriptreactjsvalidationpasswordscompare

Exploring Scrollbar Components with CSS Selector in Selenium

Here is an xpath used to access scroll bar elements: /html/body/div/div[3]/div/div[2]/div[2]/div[1]/table/tbody/tr/td/table/tbody/tr[5]/td/div/table[4]/tbody/tr/td/table/tbody/tr/td[3]/div/div/div/div[4]/div[1]/div[3] I captured this xpath with Firepath, ...

javahtmlcssseleniumxpath

Exploring the Uses of SystemJS with TypeScript Loader

Can someone help clarify something about this TypeScript plugin for SystemJS? https://github.com/frankwallis/plugin-typescript/ Here is what the plugin does: This SystemJS plugin allows you to import TypeScript files directly and have them compiled in ...

javascripttypescriptsystemjs

What is the mechanism through which React manages the use of the "-" symbol within

Can someone help me with a CSS block? .button-set { /* CSS styles */ } What is the best way to apply this to a JSX element using the className attribute? ...

cssreactjsjsx

"Modifying a variable within an object while iterating through a loop

I am attempting to update a variable within an object while looping through the elements. Specifically, I am targeting all parent elements with the class "parent" to use with the ScrollMagic plugin. Here is my code: var childElement = $('.child' ...

javascriptjqueryarraysloopsobject

Using PHP to auto populate HTML form

In my application, I have two forms. The first form takes user input with a post action and runs a SELECT query with a WHERE clause using PHP in the backend. The retrieved value is stored in a session variable to make it global. I then display this session ...

javascriptphphtmlmysql

Ways to ensure all images have been successfully uploaded to Firebase before executing a function

Here's a function I've created that takes image URIs from the state, uploads them to Firebase Storage, and then updates the state with the download URLs: uploadImages = async (userID) => { // Loop through each image for (var index = 0 ...

javascriptreactjsfirebasereact-nativeasynchronous

Concerns regarding the server's reaction

After integrating AJAX, PHP, and JavaScript into my calculator, I encountered an issue where the PHP file's entire source code is returned when requesting a response from the server. How can I prevent this from happening? Below is the JavaScript code ...

javascriptphpajax

Improved way to handle nested if statements in JavaScript

Suppose there exist 3 divs within my HTML document with the following IDs: stepone steptwo stepthree The objective is to first fetch JSON data from the server and load it into the stepone div. If the returned status is '1', then display ' ...

javascriptjqueryif-statement

How to handle javascript and json file processing?

My json data structure is as follows: var json = { "A": { "A1": { "A11": "A", "A12": "B", "A13": "C" }, "A2": { "A21": ...

javascriptjson

Generate a dynamic kendo dropdown with data sources assigned in separate methods

Creating a kendo dropdown list dynamically based on the number of received id's is presenting a challenge. A method has been implemented to loop through each id and generate a corresponding dropdown with that id. These dropdowns are not all generated ...

javascriptjquerykendo-ui

Creating a unit by merging variables in SASS

Is there a way to merge two variables in SASS to create a single unit together? The current configuration is outlined below: $font-size: 16; $font-unit: px; $base-font-size: {$font-size}{$font-unit} !default; @if unit($base-font-size) != 'px' ...

csssass

Rearranging the order of Div elements within a main container using JavaScript DOM manipulation

How can I move elements within a div from the start to the end in the same div, for example, changing the order from 1-2-3 to 2-3-1? My code: const cards = document.querySelectorAll(".card"); const firstCard = document.querySelectorAll(".card")[0].inne ...

javascripthtmldomnodelist

jQuery allows us to set two separate conditions for two distinct variables

I've written this function: settings_rc_left.on('click', function(){ var settings_list_last_element_id_one = settings_menu_element.attr('id') == 'r_02', settings_list_last_element_id_two = settings_menu_eleme ...

javascriptjqueryclickattr

The CSS rule for @media screen is failing to function properly on mobile devices

Is there a way to hide a specific section of my home page only on smartphones? I've tried using the code below but it's still showing up on my phone. Any advice? @media screen and (max-width: 640px) { #statistics .row { visi ...

htmlcss

Is it possible to alter the cursor according to the position of the mouse?

Is it possible to change the cursor from default to pointer when the mouse enters the specific rectangle area (50, 50, 100, 100) of the body? The dimensions are in pixels. Instead of defining a separate div and setting the cursor style on it, I'm loo ...

javascriptjqueryhtmlcsscursor