$(function () {
  $('.bubbleInfo').each(function () {
    // options
    var distance = 10;
    var time = 350;
    var hideDelay = 500;
    var top = -30;
    var animatedtop = -45;
    var left = -1;

    var hideDelayTimer = null;

    // set the mouseover and mouseout on both element
    $(this).mouseover(function () {
     $('.popup').css('display', 'none');
      // stops the hide event if we move from the trigger to the popup element
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

        // reset position of popup box
        $(this).children('.popup').css({
          opacity: 0,
          top: top + 'px',
          left: left + 'px',
          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: animatedtop + 'px',
          opacity: 1
        }, time, 'swing', function() {});
      //}
    }).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
      popup = $(this).children('.popup');
      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
        popup.animate({
          top: animatedtop + 'px',
          opacity: 0
        }, time, 'swing', function () {
          // hide the popup entirely after the effect (opacity alone doesn't do the job)
          popup.css('display', 'none');
        });
      }, hideDelay);
    });
  });
});