How to select child element in each element with jQuery?

Question

i'm beginer in jQuery. im try in to creat a tooltip. i have something like flowing code:

<div class="view-port">
    <div class="item">
        <a href="#" class="item-link"><img src="product"></a>
        <div class="tooltip">some description</div>
    </div>
    <div class="item">
        <a href="#" class="item-link"><img src="product"></a>
        <div class="tooltip">some description</div>
    </div>
    <div class="item">
        <a href="#" class="item-link"><img src="product"></a>
        <div class="tooltip">some description</div>
    </div>
    <div class="item">
        <a href="#" class="item-link"><img src="product"></a>
        <div class="tooltip">some description</div>
    </div>
</div>

i want to show .tooltip div in each .item element when the mouse enter the each .item element. i wrote the flowing code to do that:

$('.view-port').on('mouseenter', '.item', function(e){             
   $(' .tooltip').show();
});

but when i move the mouse on each item, all the .tooltip shown.

how can i fix that..?!

TnX

Answer 1

You should try this (.find() will search the element in the current element selected with $(this)):

$('.view-port').on('mouseenter', '.item', function(e){             
   $(this).find('.tooltip').show();
});

or this:

$('.view-port').on('mouseenter', '.item', function(e){             
   $('.tooltip', this).show()
});   

Answer 2

You can use .find() or .children() relativly to $(this)

$('.view-port').on('mouseenter', '.item', function(e){             
    $(this).find('.tooltip').show();
});

or

$('.view-port').on('mouseenter', '.item', function(e){             
    $(this).children('.tooltip').show();
});

Where $(this) = $('.item') relativly to $('.view-port')

Answer 3

this inside the event handler refers to the current item element on which mouse entered, so use this along with .find()

$('.view-port').on('mouseenter', '.item', function(e){             
   $(this).find('.tooltip').show();
});