Trigger mouseenter and mouseleave for repeating elements

Question

I am fetching data from MySql and I am displaying it in a table. I would like that for each <td> that contains a certain id to display some extra info on mouseenter and hide it on mouseleave using jQuery. Here is the HTML output:

<table>
    <tbody>
        <tr>
            <th>Option 1</th>
            <th>Option 2</th>
            <th>Option 3</th>
        </tr>
<?php   
    while ($row = mysqli_fetch_assoc($result)) {
?>  
    <tr>
        <td id="triggerTooltip"><?php echo $row['option1']; ?>
            <div class="tooltip">
                <p>Extra info</p>
            </div>
        </td>                   
        <td><?php echo $row['option2']; ?></td>
        <td><?php echo $row['option3']; ?></td>
    </tr>
<?php
    }
?>
    </tbody>
</table>

The default display property for the tool-tip is set to none . Here is the jQuery I am using:

$('#triggerTooltip').mouseenter(function() {
    $(this).closest('.tooltip').show();
}).mouseleave(function() {
    $(this).closest('.tooltip').hide();
});

I tried using $(this).find('.tooltip') and it works, but only for the first occurrence of the #triggerTooltip . I think I am getting it wrong. Can you please help me to figure this out? Thank you.

Answer 1

The above answer is correct here, this behaviour could also be implemented with CSS if you wanted, with a rule like:

.triggerTooltip .tooltip {
    display: none;
}

.triggerTooltip:hover .tooltip {
    display: block;
}

Answer 2

It seems that you are duplicating (or n plicating) ids. Don't duplicate ids! Use classnames instead.

$('.triggerTooltip').mouseenter(function() {
     $(this).find('.tooltip').show();  
}).mouseleave(function() {
     $(this).find('.tooltip').hide();
});

HTML

   <td class="triggerTooltip"><?php echo $row['option1']; ?>
        <div class="tooltip">
            <p>Extra info</p>
        </div>
    </td>             

Answer 3

Try using jquery hover , which takes two functions as arguments, and remember that classes and IDs are different. IDs are meant to be unique on a page.

Answer 4

You can use:

$('#triggerTooltip').mouseenter(function() {
    $(this).find('.tooltip').each(function() {$(this).show()});
}).mouseleave(function() {
    $(this).find('.tooltip').each(function() {$(this).hide()});
});