Hello and thank you for viewing this thread.

Site in which I am working on: http://mitsubishielectric-usa.com/products/pg.php

The problem:
When you roll over the rounded rectangles (known as triggers from now on), another div pops out above it with content in it (from here on out, it will be referenced as the bubble). Once the bubble has popped up, the mouse can hover between the bubble and the trigger. What I wish is for the bubble to disappear once it leaves the trigger. So if it wonders into the bubble, it will disappear.

**NOTE:
When I delete this line:

Code:
// stops the hide event if we move from the trigger to the popup element
      if (hideDelayTimer) clearTimeout(hideDelayTimer);
:the rollover becomes screwy.


If anyone has or comes up with a solution to this, it would be greatly appreciated. Thank You.


CODE:

Code:
$(function () {
  $('.bubbleInfo').each(function () {
    // options
    var distance = -10;
    var time = 250;
    var hideDelay = 100;

    var hideDelayTimer = null;

    // tracker
    var beingShown = false;
    var shown = false;
    
    var trigger = $('.miniproduct', 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({
		  position: 'absolute',
		  left: -80,
		  top: -190,
          //top: 30,
          //left: trigger.css('left'),
          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;
		  //console.log( 'after show the top of', popup.attr('id'), 'is', popup.css('top') );
        });
      }
    }).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)
		  //console.log( 'after hide the top of', popup.attr('id'), 'is', popup.css('top') );
          popup.css({'display' : 'none'});
        });
      }, hideDelay);
    });
  });
});//]]>