I have plenty of divs with same class, that I want to show. This div is inside a div, so like a tooltip

Question

I'm a noob with jQuery, so I have some problems.

I have many divs generated with a foreach (PHP), like this:

And then, I have some tooltip divs that look like this:

    foreach($posts as $post):
        $id = $post['post_id'];
    ?>
        <div id="stor" style="background-color:red; width:100px;">
        <?php echo $post['user'] . " " . $post['contents'] . "<br>";?></div><br>

        <div id="popup" style="display:none; background-color:black; width:100px; height:100px; color:white;"><?php echo $post['date_posted'] .  " " . $post['user']; ?></div>
        <?php
        endforeach; ?>

So, on my first "stor" div, I want to hover over so the first "popup" div show the content. I hope I wasn't confusing. I'll explain better if needed!

Answer 1

You have to change the id to class , because id s are unique by definition.

Your jQuery would look something like:

$('.stor:first').on('mouseover', function(e){
  mouseenter: function () {
    $('.popup:first').show();
  },
  mouseleave: function () {
    $('.popup:first').hide();       
});

EDIT:

Based upon your final comment, you actually want:

$('.stor').on('mouseover', function(e){
  mouseenter: function () {
    $(this).find('.popup').show();
  },
  mouseleave: function () {
    $(this).find('.popup').hide();       
});

This assumes that there is only one popup per stor . Otherwise, use the :first pseudoelement. See the documentation for find .

Answer 2

ID s must be unique, you should use classes instead. You could achieve this result with css only without jquery.

 .stor { background-color: red; width: 100px; } .popup { display: none; background-color: black; width: 100px; height: 100px; color: white; } .stor:hover + .popup { display: block; } 

 <div class="stor"> user- contents <br> </div> <div class="popup">date_posted - user</div> 

Answer 3

If you want tooltips, this has already been solved in jQueryUI. http://jqueryui.com/tooltip/

<?php foreach($posts as $post):
    $id = $post['post_id'];?>

    <div class="stor" style="background-color:red; width:100px;"
    title="<?php echo $post['date_posted'] .  " " . $post['user']; ?>">
    <?php echo $post['user'] . " " . $post['contents'] ;?>
    </div>

<?php endforeach; ?>

<script>
$(document).ready(function(){
    $('.stor').tooltip();
});
</script>