How to simplify multiple mouseover and mouseout functions?

Question

Sorry if my title isn't very clear. I wasn't sure what I should post this as. So here is the issue...

I have this jQuery Code.

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

What I am trying to do is 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. Thanks for your help.

-Kris

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

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.

Answer 3

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 4

Simple enough.

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