3
\$\begingroup\$

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();
});
\$\endgroup\$

migrated from stackoverflow.com Jul 12 '12 at 16:05

This question came from our site for professional and enthusiast programmers.

  • \$\begingroup\$ What is the HTML for .remove and .tooltip, how are they related in the DOM? \$\endgroup\$ – John Koerner Jul 12 '12 at 14:25
6
\$\begingroup\$

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(); }
    });
});
\$\endgroup\$
  • \$\begingroup\$ @KrisHollenbeck: No problem! Some more details about the ever-useful each can be found here: api.jquery.com/each \$\endgroup\$ – Ry- Jul 12 '12 at 14:36
  • \$\begingroup\$ Isn't an each loop unnecessary? Why just attach to all .remove elements at once? Like this. \$\endgroup\$ – iambriansreed Jul 12 '12 at 14:40
  • \$\begingroup\$ @anonymousdownvotingislame: Please see all my other comments about why index won't work. \$\endgroup\$ – Ry- Jul 12 '12 at 15:18
  • \$\begingroup\$ Also, I agree with @anonymousdownvotingislame's username. A comment when you downvote me would be much appreciated, random person. \$\endgroup\$ – Ry- Jul 12 '12 at 15:54
  • \$\begingroup\$ I see no comments regarding index()? \$\endgroup\$ – iambriansreed Jul 12 '12 at 15:59
1
\$\begingroup\$

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!

\$\endgroup\$
0
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.