Simplifying multiple mouseover and mouseout functions

Question

I am trying to hide and show tooltips depending on what element is hovered over. This works as expected and I could continue to rinse and repeat. However, I am wondering if there is a good way to simplify this or make it more compact. Also I was assuming I could use .hover(), but that didn't seem to work for me. So instead I am using mouseover and mouseout.

$('.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();
});

Answer 1

Use an .each "loop":

var tooltips = $('.tooltip');

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

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

Answer 2

If i'm not totally wrong try referencing your target through a custom attribute on the trigger:

<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>

there's room for improvement but should help.

Happy coding!

Answer 3

Have a single mouse move event handler that tracks the element id it's currently on and set the tooltip based on it. For improved performance you could instead poll mouse's position every say 500 ms and set the tooltip based on that.

You would have a single function to manage all your tooltips in a switch(){} block of code with a "default" case that sets the tooltip to empty.