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

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.

Related

Prevent all elements from scrolling except a popup and its contents

I am trying to get the following behavior to occur: When the popup element is shown, I want to prevent any and all elements from scrolling unless they are the popup and the elements within it. The behavior currently is that when scrolling within the popup element, you will reach the bottom or the top and the rest of the document continues to scroll.
About the code:
The popup itself is a fixed div that appears on the page (on click) when an anchor link is clicked, so the 'prevent scroll' action should occur when the anchor is clicked.
I have put random elements to represent that the content outside the popup is out of your control to style it; therefore it should not matter what this content is other than it being straight forward HTML elements.
The below jsFiddle contains what I have accomplished so far. My problem is certainly in 'how' to grab these elements that I need scroll prevention to occur upon.
Here is is: jsFiddle.
Your help is greatly appreciated!
You can change the overflow of the body and do something like this:
// shows pop up
$("#showPopup").click(function () {
$('body').css({
overflow: 'hidden'
});
$(".popup").fadeToggle(500);
$(".overlay").fadeToggle(500);
// selects anything but the popUp and its children and
$('body > *:not(.popup)').css({
"overflow-y": "hidden"
});
});
// closes pop up
$(".closePopup").click(function () {
$('body').css({
overflow: 'auto'
});
$(".overlay").fadeToggle(500);
$(".popup").fadeToggle(500);
$('body > *:not(.popup)').css({
"overflow-y": "scroll"
});
});
Setting the overflow to hidden will hide the scroll bar when the pop up is shown. Then, when you close it you set the overflow to auto and then you can scroll the page.

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/

How can I set focus to a div with overflow:scroll

When I go to the Gallery page of this website: http://roxannelin.azurewebsites.net I am unable to scroll down until after I click on the page. I would like to be able to scroll down using the mouse wheel as soon as I land on this page.
I have tried setting the focus by placing a tabindex on the div and using jquery .focus() however this moves me to the 3rd tab (showreel) and messes up the layout.
How can I bind the scroll event to this particular div without the user having to do anything?
Try to use click trigger on your div or on any element inside your div, after DOM load:
$(function() {
$("#divId").trigger("click");
});

Jquery Remove Clear Top CSS attribute

I am creating a hover over button, once hovered it will scroll up to unreal more content over my slideshow, but when I hover over the button it pulls up but wont come back down.
Click here to see live, hover over Contact Our Team Button on slider
jQuery(".buttontwo").hover(
function(e){
jQuery('.buttontwo').animate({top:'0px', bottom:'auto'}, 200)
},
function(e){
jQuery('.buttontwo').animate({bottom:'75px', top:'auto'}, 200)
}
);
Any ideas guys?
Thanks
Try adding a fixed value to the top property in the second function().
However you should be aware that as soon as you hover the button and the animation starts the second function will be triggered since you're not hovering the button anymore.
You might have to find a different way to animate that, perhaps adding aonMouseEnter / onMouseLeave event to the button's container.

Draggable Bootstrap Popover

I'd like to create a Bootstrap popover that follows a draggable image (using jQuery UI Draggable library). By "follows", I mean that if the image is dragged 10 pixels right, the popover also moves 10 pixels right. The issue I'm having is that I'm not sure how to link the Bootstrap popover to the image. The 'container' parameter on the popover intializer doesn't seem to work (ideally, I would like to put the image and the popover in a parent div and make that div draggable). I'm not sure what the best way to go about doing this is? Elegant solutions would be great, but a hacky one is better than nothing!
Something like this should work..
$('body').on('click', function (e) {
$('[data-toggle=popover]').each(function () {
// hide any open popovers when the anywhere else in the body is clicked
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
$("[data-toggle=popover]").mousedown(function(){
// toggle popover when link is clicked
$(this).popover('toggle');
});
$("[data-toggle=popover]").draggable({
stop:function(){
// show popover when drag stops
$(this).popover('show');
}
});
This assumes you want to show the popover when the container (link) is 'clicked'. The popover will toggle when the link is clicked, or show when dragging stops.
Also, a link (a href) has to be used to contain the draggable. If you want to make the link look like a div set it's CSS to display:block.
Demo: http://bootply.com/61825

Categories