JSFiddle - React, Tailwind, and code Playground

HTML

<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 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>          
                          </div>
                      </td>
                      <td class="col-2">
                            <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span> 
                            <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>  </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 class="article_popup_container">
                                <div class="field-content">
                                    <div class="article_popup">
...

CSS

.container_block {
width: 280px;
background-color: grey;   
margin-left:300px;    
}

.field-title {
width: 150px;
height: 30px;
padding: 5px;
margin:0;    
}


.article_popup_container .field-content {
position: relative;   
}

.article_popup {
display: none;   
position: absolute;
width: 150px;
top:0px;
background-color: yellow;
}


.col-1 .article_popup,
.col-2 .article_popup {
top: -35px;
}
.col-1 .article_popup {
right: 156px;
}
.col-2 .article_popup {
left: 156px;
}

JavaScript

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