Question

Possible Duplicate:
How to show/hide a div on mouseover using jquery?

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 class = "popup">
              <div class="Month">
                    <div class="MonthDiv">
                        <span class="MonthText">'.$testcontent[0].'</span>
                    </div>
              </div>
              <div class='Day'>
                    <div class="DayDiv">
                        <span class="DayText">'.$testcontent[1].'</span>
                    </div>
              </div>
              <div class='Time'>
                    <div class="TimeDiv">
                        <span class="TimeText">'.$testcontent[2].'</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();            
    }, function() {
       $('.popup').hide();
    });

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

reference: I used this link to display 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?

I even tried with

$('.trigger').hover(function(e) {
   $('.MonthText').html($(this).html());
   $('.popup').show();
}

The css for the popup is …

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

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

Answer 1

All your popup divs have same I’d so ideally jQuery will pick up the first one. Trying adding an attribute on your .trigger element and popup div that indicate which div it should popup (can use the index from loop). Then in hover event you can show the correct popup using that attribute value.

I’m typing from a phone so do not have sample code. Let me know if you understand this else I can provide a sample

Edit: A different sample below

$(document).ready(function(){
    $('.trigger').click(function(){
        $(this).parent().children('.popup').show();
    });
}); 

Let me know if this works. The above answer from @abhijeet-pawar should also work ideally