How to change the div content dynamically on mouse over?
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/9564481/how-to-show-hide-a-div-on-mouseover-using-jquery">How to show/hide a div on mouseover using jquery?</a>  </p>
</blockquote>



<p>I have a foreach loop inside a table to display the content from DB dynamically.<br></p>

<pre><code>&lt;table cellpadding="3" cellspacing="0" align="center"&gt;

&lt;?php 
foreach($test as $testcontent){
                echo  '&lt;tr&gt;';
    echo '&lt;td class="trigger"&gt;'.$testcontent[0].'&lt;/td&gt;';
    echo '&lt;td class="trigger"&gt;'.$testcontent[1].'&lt;/td&gt;';
    echo '&lt;td class="trigger"&gt;'.$testcontent[2].'&lt;/td&gt;';
    echo '&lt;div class = "popup"&gt;
              &lt;div class="Month"&gt;
                    &lt;div class="MonthDiv"&gt;
                        &lt;span class="MonthText"&gt;'.$testcontent[0].'&lt;/span&gt;
                    &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class='Day'&gt;
                    &lt;div class="DayDiv"&gt;
                        &lt;span class="DayText"&gt;'.$testcontent[1].'&lt;/span&gt;
                    &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class='Time'&gt;
                    &lt;div class="TimeDiv"&gt;
                        &lt;span class="TimeText"&gt;'.$testcontent[2].'&lt;/span&gt;
                    &lt;/div&gt;
              &lt;/div&gt;
         &lt;/div&gt;';
    echo '&lt;/tr&gt;';
 }
?&gt;
&lt;/table&gt;
</code></pre>

<p>Function to show/hide the popup is as followed...<br></p>

<pre><code>$(function() {
   var moveLeft = 20;
   var moveDown = 10;

   $('.trigger').hover(function(e) {
       $('.popup').show();            
    }, function() {
       $('.popup').hide();
    });

    $('.trigger').mousemove(function(e) {
    $(".popup").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
   });
</code></pre>

<p>reference: <a href="http://creativeindividual.co.uk/2011/02/create-a-pop-up-div-in-jquery/" rel="nofollow">I used this link to display popup</a></p>

<p>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?</p>

<p>I even tried with </p>

<pre><code>$('.trigger').hover(function(e) {
   $('.MonthText').html($(this).html());
   $('.popup').show();
}
</code></pre>

<p>The css for the popup is ...<br></p>

<pre><code>div.popup {
    display: none;
    position: absolute;
    width: 640px;
    padding: 10px;
    background:#FFFFFF;
    color: #000000;
    border: 1px solid #1a1a1a;
    font-size: 90%;
    height:400px;
}
</code></pre>

<p><br>
Now the div changes with the value where the mouse points<br>
I need to get the entire row value to get changed....(I mean i need to reload the entire div)<br>
I have been working on this for a long time.<br>
Please help me...<br>
Changes Made: I replaced the popup id with the class, but still getting the same result.</p>
