Untitled

How to simplify multiple mouseover and mouseout functions? [migrated]
$('.remove').eq(0).mouseover(function(){
    $('.tooltip').eq(0).show();
});

$('.remove').eq(0).mouseout(function(){
    $('.tooltip').eq(0).hide();
});

$('.remove').eq(1).mouseover(function(){
    $('.tooltip').eq(1).show();
});

$('.remove').eq(1).mouseout(function(){
    $('.tooltip').eq(1).hide();
});

var tooltips = $('.tooltip');

$('.remove').each(function(i) {
    var tooltip = tooltips.eq(i);

    $(this).on({
        mouseover: function() { tooltip.show(); },
        mouseout:  function() { tooltip.hide(); }
    });
});

<div id="tooltip1" style="display:none">TOOLTIP 1 CONTENT</div>
<div id="tooltip2" style="display:none">TOOLTIP 2 CONTENT</div>
<div id="tooltip3" style="display:none">TOOLTIP 3 CONTENT</div>


<a href="javascript:;" class="remove" data-ref="#tooltip1">TRIGGER 1</a>
<a href="javascript:;" class="remove" data-ref="#tooltip2">TRIGGER 2</a>
<a href="javascript:;" class="remove" data-ref="#tooltip3">TRIGGER 3</a>

<script type="text/javascript">
 $('.remove').mouseover(function(){
        $($(this).attr("data-ref")).show();
    });

 $('.remove').mouseout(function(){
        $($(this).attr("data-ref")).hide();
    });
</script>

$('.remove').hover(function(){
    $('.tooltip').eq($(this).index()).show();
}, function(){
    $('.tooltip').eq($(this).index()).hide();
});