hover over one div, another div fades in and remains visible while user hovers over it

Question

I have a container div. Inside the container, apart from the article's title, there is a hidden div (position:abolute, next to the article's title & "outside" of the container div) which contains the article's image and trimmed text.

What I want: User hovers over article's title:

<div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>

As a result, the popup

<div class="article_popup">

fades in next to the article's title container.

If user doesn't hover over popup, popup fades out after 1 sec. If he does, popu stays visible as long as user mousesover the popup, then fades out after 1 sec.

Problems:

-1- There are many article containers & popup divs sharing the same class so all popups appear if only 1 title is hovered.

-2- I've tried this and similar solutions:

(function ($) {
    $(document).ready(function(){
        $('.field-title').bind('mouseenter', function() {
        $('.article_popup').fadeIn();
        });
        $('.field-title').bind('mouseleave', function() {
        $('.article_popup').fadeOut();
        });
    });
}(jQuery));

But this doesn't cover the case where user hovers over the popup itself.

update: http://jsfiddle.net/zThP7/14/

Here is my HTML (as you can see there many nested divs with the same classes):

<div class="container_block">
<table class="container_table">
    <tbody>
          <tr class="row-1">
                  <td class="col-1">
                        <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>  
                        <div class="article_popup_container">
                            <div class="field-content">
                                <div class="article_popup">
                                    <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
                                    <div class="article_popup_text">Lorem Ipsum</div>
                                </div>
                            </div>  
                        </div>          
                  </td>
                  <td class="col-2">
                        <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>  
                        <div class="article_popup_container">
                            <div class="field-content">
                                <div class="article_popup">
                                    <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
                                    <div class="article_popup_text">Lorem Ipsum</div>
                                </div>
                            </div>  
                        </div>        
                   </td>
          </tr>
          <tr class="row-2">
                  <td class="col-1">
                        <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>  
                        <div class="article_popup_container">
                            <div class="field-content">
                                <div class="article_popup">
                                    <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
                                    <div class="article_popup_text">Lorem Ipsum</div>
                                </div>
                            </div>  
                        </div>        
                  </td>
                  <td class="col-2">
                        <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>  
                        <div class="article_popup_container">
                            <div class="field-content">
                                <div class="article_popup">
                                    <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
                                    <div class="article_popup_text">Lorem Ipsum</div>
                                </div>
                            </div>  
                        </div>        
                  </td>
          </tr>
          <tr class="row-3">
                  <td class="col-1">
                        <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>  
                        <div class="article_popup_container">
                            <div class="field-content">
                                <div class="article_popup">
                                    <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
                                    <div class="article_popup_text">Lorem Ipsum</div>
                                </div>
                            </div>  
                        </div>        
                  </td>
                  <td class="col-2">
                        <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>  
                        <div class="article_popup_container">
                            <div class="field-content">
                                <div class="article_popup">
                                    <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
                                    <div class="article_popup_text">Lorem Ipsum</div>
                                </div>
                            </div>  
                        </div>        
                  </td>
          </tr>
      </tbody>
</table>

I prefer this to be solved with custom code, not a suggested jquery plugin but if it get's too complicated, a functional & cross-browser compatible plugin would be OK.

Answer 1

You'll want to move the popover inside the same container so you only have to deal with one element's mouseout. Check the first one, it will at least give you a starting point. http://jsfiddle.net/zThP7/15/

Answer 2

I think this is what you're searching for ;)

https://stackoverflow.com/a/1670561/472406

The only thing you need to change is to add the mouseenter event for you popup element and clear the timeout and for the mouseleave of the popup add a timeout to hide the popup

Since in title element you will have to clear the timeout if the user goes from the popup to the title the popup won't disappear