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
Related
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.
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/
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.
This is simple but I just can't get this bug fixed. I have a div which is visible by default and hides on mouseover to reveal menu below it, but for some apparent reason, the visibility effect keeps on repeating itself rather than just on mouseover and mouseout.
I have used following JavaScript
$(document).ready(function(e) {
$("#butt").mouseover(function () {
$(this).closest("button").css("visibility","hidden");
})
$("#butt").mouseout(function () {
$(this).closest("button").css("visibility","visible");
});
});
the fiddle is here
when you mouseover the image in the fiddle it keeps on hiding and appearing...
The behavior of your fiddle is very logical. You try to hide something on mouseover, but when the item effectively disappear, the mouse is not on it anymore! So there is a mouseout! That's why it flickers, just try to implement behaviors that are a little bit more logical than that and you will not have that kind of problem anymore.
A sample that does not flicker:
$(document).ready(function(e) {
$("#butt").mouseover(function () {
$("span", $(this)).css("visibility","hidden");
})
$("#butt").mouseout(function () {
$("span", $(this)).css("visibility","visible");
});
});
http://jsfiddle.net/xMwCN/5/
I'm assuming this is because the mouseout triggers when the button is hidden, and because the cursor is still in the same place when mouseout triggers, it triggers mouseover. I suggest you wrap your button in a container and wire up the mouseover/mouseout on the container instead. Then you can hide/show the button inside. On your fiddle you're hiding the b and not the button. Perhaps instead of
$(this).css('visibility', 'hidden')
it should be
$('button', this).css('visibility', 'hidden')
I also noticed your css hover styles are affecting this as well.
You should use css attribute opacity instead of visibility otherwise the element wont be there anymore activating the mouse event again.
I have updated your Fiddle with the Gray Box going invisible on mouseover
But what you want to do here is this:
$(document).ready(function(e) {
$("#butt").mouseover(function () {
$(this).css("opacity","0");
})
$("#butt").mouseout(function () {
$(this).css("opacity","1");
});
});
And also your css was changing the display, witch was causing some visibility problems, you might want to change it to:
.info {
display: none;
}
Or otherwise check which element need to have the :hover property.
Cheers.
You need a fixed height for the panel. It is because the height of image is 400px, when you hover it, the image hide and show the menu. However, the menu height is less than 400px. Now you are not hovering the panel and show the image again and repeating the problem. The simplest fix is set height to the panel.
.panel { height:400px;}
.panel ul{ margin:0;}
Hope this can fix your problem.
If it is an acceptable solution, you can just do the following to avoid flickering:
$(document).ready(function(e) {
$(".panel").mouseover(function () {
$("#butt").css("visibility","hidden");
})
$(".panel").mouseout(function () {
$("#butt").css("visibility","visible");
});
});
This removes the text when you hover over the entire panel and then it appears on mouseout. You cannot hide a div and call mouseout on that div, the div with the hover must stay there the entire time to avoid flickering problems.
I got the answer which i was looking for, tnax everyone, because i was able to deduce the result by guidelines and answers which everyone provided.
As mentioned, my javascripts hides the div on mouseenter and makes it visible on mouseleave; when mouse is over it is hidden and browser understans this as mouseleave, therefore it was toggling continuously, visible and hide
The code thus now i did is
$(document).ready(function(e) {
$("#butt").mouseenter(function () {
$("#butt").css("visibility","hidden");
})
$("#info2").mouseleave(function () {
$("#butt").css("visibility","visible");
});
});
Thus mouseleave is on the div which is beneath it which i want to show on mousenter of the above div
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>.