$(function () 
{
  $('.bubbleInfo-Vert').each(function () 
{
    // options    
    var distance = 10;
    var time = 150;
    var hideDelay = 0;
    var hideDelayTimer = null;
    // tracker    
    var beingShown = false;
    var shown = false;
        var trigger = $('.trigger', this);
    var popup = $('.popup-Vert', this);
    // 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: -70,          left: -290,          display: 'block' // brings the popup back in to view        
          })        // (we're using chaining on the popup) now animate it's opacity and position        
          .animate(
{
          left: '-=' + distance + 'px'}, 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(
{
          left: '-=' + distance + 'px'}, 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);
    });
  });
});