I am using jQuery Bubble Popup v 2.3.1 http://www.vegabit.com/jquery_bubble_popup_v2/
I am getting issue while using this on two adjacent elements with selectable true. When I mouse over one and move mouse over the bubble; if mouse reaches the other element which is at the back of the bubble, second bubble appears over first one. Means two bubbles are shown at a time.
I want the bubble to be shown only if its visible (not at the back of a shown bubble) and i mouse over it also one bubble at a time. Please help!
I have faced same issue of displaying another popup for adjacent element. Below is the code in which i have managed mouse events by myself. I hope this script will help you.
<script type="text/javascript">
jQuery(document).ready(function() {
var MouseOverOnBubble = false;
jQuery('.ClassName').CreateBubblePopup({
themeName: 'all-azure',
themePath: 'jquerybubblepopup-theme',
manageMouseEvents: false
});
jQuery('.ClassName').mouseover(function(){
var button = jQuery(this);
var info = "something";
var generatedId = button.GetBubblePopupID();
if(!button.IsBubblePopupOpen())
{
jQuery.get('getData.php?data='+info, function(data) {
var seconds_to_wait = 1;
function pause(){
var timer = setTimeout(function(){
seconds_to_wait--;
if(seconds_to_wait > 0){
pause();
}else{
button.SetBubblePopupInnerHtml(data, true); //false -> it shows new innerHtml but doesn't save it, then the script is forced to load everytime the innerHtml...
button.ShowBubblePopup();//Its freezes bubble until .UnfreezeBubblePopup(),.ShowBubblePopup() or .HideBubblePopup() are called.
jQuery('#'+generatedId).mouseover(function(){MouseOverOnBubble = true;jQuery('#'+generatedId).css('display','block');});
jQuery('#'+generatedId).mouseout(function(){MouseOverOnBubble = false;jQuery('#'+generatedId).css('display','none');});
};
},1000);
};pause();
});
}
else
{
jQuery('#'+generatedId).css('display','block');
}
}); //end mouseover event
jQuery('.ClassName').mouseout(function(){
var button = jQuery(this);
var seconds_to_wait = 1;
function pause(){
var timer = setTimeout(function(){
seconds_to_wait--;
if(seconds_to_wait > 0){
pause();
}else{
if(!MouseOverOnBubble){button.HideBubblePopup();}
};
},1000);
};pause();
});
});
</script>
You can also try with $.ajax for generating ajax request from where you can set beforeSend for setting up preloading image for bubble popup.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.