I can't get my popup to stay up after hovering over it, using jQuery. What am I missing here?

Question

Hi,

I'm new to jQuery, but have been working with javascript and DHTML for several years. Trying to transfer over my knowledge of that to jQuery but have run into a snag.

When hovering over a div, the popup comes up fine. If you leave the initial trigger div, the popup goes away - great. The problem occurs when I move off the trigger div to the popup. It stays up as it's supposed to, but when moving back to the trigger div from the popup, the popup should stay up, but it doesn't. It disappears and then goes through the process of appearing again.

Can anyone tell me what I'm missing here? I know it's something small, but I can't figure it out. I've looked at plugins for tooltips and such and can't seem to find one that will work for my specific needs.

The trick is that the popup must be outside the outer wrapping div (it's appended before the closing body tag in the actual script) as the outer wrapping div has a overflow: hidden attribute. Below is the code and the basic HTML. Thanks for you help.

Note: I use the easing plugin that is not listed here, hence the extra code in the animate call. Also, there is another function I use to get the position, but that is not included here to try to keep the post smaller.

Javascript

var display_timeout = 0;
var display_hide_timeout = 0;

$(".more_dvds_cover").hover(function() {
    if (display_timeout != 0) {
        clearTimeout(display_timeout);
    }

    // save a reference to 'this' so we can use it in timeout function
    var this_element = this;
    display_timeout = setTimeout(function() {
        display_timeout = 0;

        // perform things with this_element here buy referencing it like $(this_element), instead of $(this)
        var hoverText = $(this_element).children('img:first').attr("title");
        $(this_element).data('title', hoverText);
        $(this_element).children('img:first').removeAttr('title');
        $('.tooltip_middle').html(hoverText);

        newPos = getPosition($(this_element), $('.tooltip'));
        $('.tooltip').css({
            left: newPos.left,
            top: newPos.top
        });

        $('.tooltip').animate({
            opacity: 'show',
            top: newPos.top + 10
        }, {
            duration: 250,
            easing: 'easeOutQuint'
        });
    }, 250);
}, function() {
    if (display_timeout != 0) {
        clearTimeout(display_timeout);
    }

    // save a reference to 'this' so we can use it in timeout function
    var this_element = this;
    display_hide_timeout = setTimeout(function() {
        tipTop = $('.tooltip').offset().top;

        $(this_element).children('img:first').attr('title', $(this_element).data('title'));
        $('.tooltip').animate({
            opacity: 'hide',
            top: tipTop - 10
        }, {
            duration: 250,
            easing: 'easeOutQuint'
        });
    }, 10);

    $(".tooltip").hover(function() {
        clearTimeout(display_hide_timeout);
    }, function() {
        tipTop = $('.tooltip').offset().top;

        $(this_element).children('img:first').attr('title', $(this_element).data('title'));
        $('.tooltip').animate({
            opacity: 'hide',
            top: tipTop - 10
        }, {
            duration: 250,
            easing: 'easeOutQuint'
        });
    });
});

CSS:

.more_dvds {
 border: 10px solid #e7e7e7;
 margin: 4px 0 25px;
 padding: 0 20px;
 overflow: hidden;
}

* html .more_dvds {
 zoom: 1;
}

.more_dvds h3 {
 background: none;
 padding: 0 0 15px 0;
 border: none;
}

.more_dvds h4 {
 font-size: 1em;
 height: 2.6em;
 margin: 0 0 5px;
 overflow: hidden;
}

.more_dvds_box {
 float: left;
 width: 142px;
 text-align: center;
 margin: 0 6px;
 line-height: 1.25em;
 display: inline; /* IE6 double margin bug */
}

.more_dvds_cover {
 width: 120px;
 height: 162px;
 margin: 0 auto 15px;
}

.row_outer {
 overflow: hidden;
 position: relative;
 height: 246px;
 width: 768px;
 margin-top: 6px;
}

.row_inner {
 position: absolute;
 left: 0;
 top: 0;
}

.tooltip {
 display: none;
 width: 379px;
 color: #0e0809;
 position: absolute;
 left: 0;
 top: 0;
}

.tooltip_top {
 height: 25px;
 background: url(../images/popups/popup_top_bg.png) no-repeat;
}

.tooltip_middle {
 background: url(../images/popups/popup_middle_bg.png) repeat-y;
 padding: 0 25px 7px;
 text-align: left;
 line-height: 1.1em;
}

.tooltip_bottom {
 height: 43px;
 background: url(../images/popups/popup_bottom_bg.png) no-repeat;
}

HTML

<div class="row_outer">
 <div class="row_inner">
  <div class="more_dvds_box">
   <div class="more_dvds_cover">
    <img src="" alt="" width="" heigh="" title="this the info for the popup that will be displayed." />
   </div>
  </div>
 </div>
</div>

<div class="tooltip">
 <div class="tooltip_top"></div>
 <div class="tooltip_middle"></div>
 <div class="tooltip_bottom"></div>
</div>