We Keep Coding

Quickly scrolling away from hover-triggered popover does not hide popover

I am using hover-triggered popovers for certain highlighted rows in a table and when you scroll away from the element relatively quickly using the mouse scroll wheel, the popover continues to show for an extra second even though you are no longer hovering the target element. It creates a strange effect where the popover scrolls away from the direction you are scrolling to, moving outside the border of the table.
Here is some example code:
$('.popover_class').popover({
trigger: 'hover',
placement: 'right'
})
<tr class="bg-warning popover_class" data-toggle="popover" data-content="example"></tr>
I've tried a variety of solutions including hiding the popover on scroll event after initializing it with the code above:
$('.popover_class').on('scroll', function() {
this.popover('hide');
});
Using bootstrap 4, popper.js 1.15, jquery 3.4, DataTables.
Thanks

Set your popover animation to false (its true by default), which will stop applying a CSS fade transition to the popover.
$('.popover_class').popover({
trigger: 'hover',
placement: 'right',
animation: false
});
Triggering popover hide on mouse scroll as you've tried will not work, because the same animation effect will get triggered just the same.

I faced similar issue while displaying bootstrap popover in JQuery DataTable control.
As seen in the above snapshot, the popover message is displayed when the user clicks on the clipboard icon. The popover was hiding when user clicked anywhere else except the DataTable scrollbar. When the user scrolls the DataTable, the popover did not hide and was showing outside of the table.
In order to handle this scenario, I used the mouseleave event on the clipboard icon as shown below,
$(tableId).off('mouseleave', '.btn-clipboard').on('mouseleave', '.btn-clipboard', function (event: JQueryEventObject) {
if (event.currentTarget) {
let controlId = event.currentTarget.id;
$('#'+controlId).popover("hide");
}
});
So, when the mouse leaves the clipboard icon image, the popover will hide. I hope it helps / gives some idea.

Bootstrap popover: hide when cursor moves outside of the window

I want to display a popover which contains several buttons when user hovers over a text link
The problem I have is the default Bootstrap popover I'm currently using is dismissed when the cursor from the link which triggered it (e.g. when the user moves to select one of the buttons)
This jsFiddle is an example of what I tried to do.. The principle is: show popover when the link (#example) is hovered, hide popover when the popover (.popover) is unhovered.
But this doesn't work, although I'm sure that the BS popover is encapsulated in a .popover class (I check with FF dev debug tool).
Funny thing: it works with another div! If I replace
$('.popover').mouseleave(function(){
$('#example').popover('hide');
});
By this
$('.square').mouseleave(function(){
$('#example').popover('hide');
});
The popover is indeed hidden when no longer hovering the blue square.
Why doesn't work with .popover?

You need to hide popover when the mouse leaves the .popover-content not .popover. And .popover-content does not exist at the beginning so you need to bind the event to the document
$(document).on('mouseleave','.popover-content',function(){
$('#example').popover('hide');
});
http://jsfiddle.net/o4o9rrsq/2/

Detect if mouse is outside of multiple elements

I made a fiddle here:
http://jsfiddle.net/RrxpT/
So the red box needs to be placed over the blue boxes when mouse is on top of them. As you can see it works, but I also want the red box to be hidden if it's not on top on any of the blue boxes.
I changed the code to:
if(box.is(':hover')){
// put red box on top
}else{
// hide red box
}
http://jsfiddle.net/RrxpT/1/
But it doesn't work very well :s
Do you have any hints?

Assuming I've understood the question correctly then I would stop using mousemove and instead delegate mouseenter and mouseleave event handlers to elements that should trigger the overlay:
$("body").on("mouseenter", ".Box", function () {
// Show the overlay
}).on("mouseleave", ".Box", function () {
// Hide the overlay
});
Because the overlay is then on top of the element it will not work nicely when you move the mouse around within the element itself. To resolve this you can add a CSS property to the overlay:
#over {
/* ... */
pointer-events: none;
}
Here's a working example.

Hover over a hidden element to show it

Is there any way to hover over an element that's already hidden. I am trying to mimic what Steam does with their arrow navigation on their home page. You'll notice that when you first get to the page, there are no arrows showing:
Then when you hover over the area where there should be an arrow, it shows itself:
I've tried setting my divs that contain the arrow images to display: none and have also tried visibility: hidden but neither seems to work with the hover or mouseover methods in jQuery. I would have thought visibility: hidden would make it work, but that doesn't seem to be the case. Is there any other way I can hide these divs from the start but still be able to have hover events work on them?

Set it to zero opacity instead:
$('#blah').hover(function() {
$(this).fadeTo(1,1);
},function() {
$(this).fadeTo(1,0);
});
http://jsfiddle.net/mblase75/bzaax/

You cannot hover over an invisible element or an undisplayed element. You can hover over a visible element and then use that to show a different previously hidden element. Or you can hover over a transparent element and make it opaque.
Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.
CSS:
#it {
opacity: 0;
width: 500px;
height:500px;
}
#it:hover {
opacity: 1;
}
Here is an example of showing one element when another is hovered over:
HTML:
<div id="me">Hover over me to display something else</div>
<div id="else">Something else</div>
jQuery:
$("#me").hover(function(){
$("#else").show();
},function(){
$("#else").hide();
});

Use the .fadeTo jQuery method to change the opacity of the element on hover state.
The jQuery site contains an example but something like this should suffice
$("element").hover(//On Hover Callback
function() {$(this).fadeOut(100);} ,
//Off Hover Callback
function() {$(this).fadeIn(500);})
From the jQuery Hover page.

You could set it to opacity: 0.
In order to make it cross-browser you probably would like to do it with jQuery tho.

One way to do this is by using an alternate hit-test div, such that it has no content, but when hovered over it shows the "arrow" div. When the "arrow" div (or the hit-test div) is exited, then the "arrow" div would be hidden once again.
Alternatively, you could use the same div for the hit-test and the "arrow", such that a background image is used for the visual elements of the div. When hovered, you could instruct the image's offset to be set to a position which would show the "arrow". When exited, you would set the offset of the background to a position where the arrow image would not longer be shown.
And, finally, if the content will always be in the same position as the hit-test area, you could set the opacity of the div to zero, and toggle accordingly.

You could set the opacity of the elements to 0. That would allow them to receive the hover events (actually mouseenter and mouseleave), but as a practical matter, make them invisible to users.

jquery dropdown div not quite working

i'm trying to make a div drop down when someone hovers over a link. Inside the div is a login form. The following code works only in that if i hover over the link the div does appear. However when i move the mouse from the link down over the div, the div immediately retracts. Please see:
jQuery(document).ready(function() {
jQuery('.slidedown').hide();
jQuery('a.top-link-cart').hover( function(){ // enter animation
jQuery('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
jQuery('.slidedown').mouseout( function() {
setTimeout( function(){
jQuery('.slidedown').stop(true,true).animate( {
height: '0px'}, 600, function(){});}, 200 ); // setTimeout ends here
}); // mouseout ends here
});
});
All i'm trying to achieve is have the div a) stay open if the user mouses from the link to the div b)close if the user moves mouse away from link but not into div and c) close if user moves mouse out of div. I thought the .mouseout function would keep the div open so that i can at least move my mouse over it but it isn't working. Any ideas? I'd be very grateful this has been a headache to me for a week now. Thanks.

You should not use .hover but .mouseover() instead for your first method.

You could wrap your link and the div that does the animation in another div and then apply the hover to the parent div instead of the link. This way you will still validate. For example:
<div class="whatever">
<a class="top-link-cart">Show login form</a>
<div class="slidedown">form html goes here</div>
</div>
and the javascript would be:
jQuery(document).ready(function(){
jQuery('.slidedown').hide();
jQuery('.whatever').hover(function(){//to show
jQuery('.slidedown').show('effect', duration in millisecs);
}, function(){//to hide
jQuery('.slidedown').hide('effect', duration in millisecs);
});
});
this uses the jQueryUI for the animation effects, but you could use the .slideDown() and .slideUp() methods as well if all you need is the div to slide up or down

You need to nest your div.slidedown inside the a.top-link-cart:
<a class="top-link-cart">Show login form
<div class="slidedown">
The login form HTML
</div>
</a>
Ignoring standards (block elements like <div> tags shouldn't really be nested inside inline elements like <a> tags), this will work because when the div.slidedown expands, so does the parent <a>.
That way, the mouseout event won't be triggered until the user's mouse leaves the <a>.