$(function () {
  $('.bubbleInfo').each(function () {
      // options    
      var distance = 10;    
      var time = 250;    
      var hideDelay = 500;    
      var hideDelayTimer = null;    
      // tracker    
      var beingShown = false;    
      var shown = false;       
       
      var trigger = $('.trigger', this);    
      var popup = $('.popup', this).css('opacity', 0);
      // 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;        
                // reset position of popup box        
                popup.css({          
                    top: -30,          
                    left: -20,          
                    display: 'block' // brings the popup back in to 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 entirely after the effect (opacity alone doesn't do the job)          
            popup.css('display', 'none');        
            });      
        }, hideDelay);    
        });  
    });
});