I'm using Superfish to popup tooltips when you mouseover an item in a list, which works swell, but the popup div allows other items below that to trigger popups when the mouse rolls over the underlying listitem.
In other words, though the popup LOOKS opaque, it's not acting like an opaque div since it's allowing items underneath it to still trigger events before the popup disappears.
I have the z-index set at 9999 to assure the div's position above everything else, but it's not acting like a solid/opaque div.
What am I missing? Does setting opacity affect more than visual opacity?
This is the jQuery function that calls the bubble popup on mouseover:
function Popup(){
//create a bubble popup for each DOM element with class attribute as "text", "button" or "link" and LI, P, IMG elements.
$('.text, .button, .link').CreateBubblePopup({
selectable: true,
position : 'top',
align : 'center',
innerHtml: '<img src="/images/loading.gif" alt="Loading" style="border:0px; vertical-align:middle; margin-right:10px; display:inline-block;" /><span>loading!</span>',
innerHtmlStyle: {
//color:'#FFFFFF',
'text-align':'left',
'z-index':'9999',
'width':'500px'
},
themeName: 'blue', //'all-black',
themePath: '/jquerybubblepopup-theme'
});
// add a mouseover event for the "link" element...
$('.link').mouseover(function(){
//get a reference object for "this" target element
var link = $(this);
//load data asynchronously when mouse is over...
$.ajax({
url: '/bodytext.php?id=' + this.id,
type: 'GET',
cache: false,
success: function(data) {
var seconds_to_wait = 0;
function pause(){
var timer = setTimeout(function(){
seconds_to_wait--;
if(seconds_to_wait > 0){
pause();
}else{
//set new innerHtml for the Bubble Popup
link.SetBubblePopupInnerHtml(data, false); //false -> it shows new innerHtml but doesn't save it, then the script is forced to load everytime the innerHtml...
// take a look in documentation for SetBubblePopupInnerHtml() method
//$('.link').SetBubblePopupOptions(selectable, true);
};
},500);
};pause();
}
});
}); //end mouseover event
}
