Skip to content

Instantly share code, notes, and snippets.

@davejlong
Created September 27, 2010 14:43
Show Gist options
  • Save davejlong/599143 to your computer and use it in GitHub Desktop.
Save davejlong/599143 to your computer and use it in GitHub Desktop.
A simple jQuery script that will create a popup bubble that fixes the issue of disappearing when the mouse hovers over the bubble. Tested with jQuery 1.2.3 and 1.4.2
.popupBubble{
position:relative;
display:inline;
}
.popupBubble .popup{
position:absolute;
display:none;
border:1px solid #AAA;
background:#FFF;
padding:5px;
width:300px;
}
<div class="popupBubble" rel="top-85">
<img src="/assets/system-images/icons/comment_10.png" class="trigger" />
<div class="popup">
<p>Wildcards are acceptable when searching for products:</p>
<ul>
<li><strong>% - Any set of characters.</strong> (e.g. Product SKU's 123SKU, 234SKU, and 345SKU can call be found with %SKU)</li>
</ul>
</div>
</div>
$(function(){
$('.popupBubble').each(function(){
// Options
var distance = 10;
var time = 100;
var hideDelay = 500;
var hideDelayTimer = null;
// Tracker
var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var popup = $('.popup', this).css('opacity',0);
// Each popupBubble div contains a class that specifies the top distance for that element
var top = $(this).attr('rel').replace('top-','');
top = '-' + top;
// Set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function(){
// Stops the hide event if we move from the trigger to the popup element
if(hideDelayTimer) clearTimeout(hideDelayTimer);
// don't trigger the animation again if we're being shown, or already visible
if(beingShown || shown) return;
else{
beingShown = true;
console.log(top);
// reset position of popup box
popup.css({
top:parseInt(top),
left:-20,
display:'block' // brings the popup back into view
})
// (We're using chaining on the popup) now animate it's opacity and position
.animate({
top: '-=' + distance + 'px',
opacity:1
},time,'swing',function(){
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function(){
// reset the timer if we get fired again - avoids double animations
if(hideDelayTimer)clearTimeout(hideDelayTimer);
// Store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function(){
hideDelayTimer = null;
popup.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function(){
// once the animate is complete, set the tracker variables
shown = false;
// hide the popup entirelet after the effect (opacity alone doesn't do the job)
popup.css('display','none');
});
}, hideDelay);
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment