Question

I have the following markup:

<!-- first marker -->
<div class="marker"></div>
<div class="tooltip">
    <p>My tooltip content"</p>
</div>

<!-- second marker -->
<div class="marker"></div>
<div class="tooltip">
    <p>My tooltip content"</p>
</div> 

<!-- repeating..... -->

and the following jQuery javascript:

$(document).ready(function() {

    $(".marker").hover(function(event){
        $('.tooltip').hide();
        $(this).next('.tooltip').slideDown('fast');
    });

});

How can I modify this script so that on hover all other open div.tooltips hide except for the next one? Currently it tries to hide all.

Answer 1

You can use the not function to omit a particular element

$(".marker").hover(function(event){
    var nextEl = $(this).next("div.tooltips");
    $('.tooltip').not(nextEl).hide();
    $(this).next('.tooltip').slideDown('fast');
});

EDIT

Also, you’ll likely want to also pass a second function to hover so that things clean up when the hover ends:

$(".marker").hover(function(event){
    var nextEl = $(this).next("div.tooltips");
    $('.tooltip').not(nextEl).hide();
    $(this).next('.tooltip').slideDown('fast');
}, function() {
    $('.tooltip').hide();
});