Question

I have a foreach loop inside a table to display the content from DB dynamically.

<table cellpadding="3" cellspacing="0" align="center">

<?php 
    foreach($test as $testcontent){
                    echo  '<tr>';
        echo '<td class="trigger">'.$testcontent[0].'</td>';
        echo '<td class="trigger">'.$testcontent[1].'</td>';
        echo '<td class="trigger">'.$testcontent[2].'</td>';
        echo '<div id = popup style="display:none">
                <div class="Month">
                        <div class="MonthDiv">
                            <span class="MonthText">'.$testcontent[0].'</span>
                        </div>
                </div>
            </div>';
            echo '</tr>';
    }
?>
</table>

Function to show/hide the popup is as followed…

$(function() {
var moveLeft = 20;
var moveDown = 10;

$('.trigger').hover(function(e) {
  $('#popup').show();
    //.css('top', e.pageY + moveDown)
    //.css('left', e.pageX + moveLeft)
    //.appendTo('body');
}, function() {
  $('#popup').hide();
});

$('.trigger').mousemove(function(e) {
  $("#popup").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});

});

reference: I used this link for popup

The popup shows up but the problem is when i move the mouse over the 2nd, 3rd…. row, only the content of the first row is shown in the popup.
I don’t know why. Can any one help me in this?

Answer 1

This is because in your code don´t change the content of the div popup.

$('.trigger').hover(function(e) {
  // Change the content of popup
   $('.MonthText').html($(this).html());
   // Later show the popup
  $('#popup').show();
    //.appendTo('body');
}, function() {
  $('#popup').hide();
});

I hope this helps 🙂