Simplify redundant jQuery code

Question

I would like to simplify my jQuery code to create a tooltip / footer tooltip as it is redundant and not very extensible. I found this post: jQuery code for simplification , but couldn't figure out how to apply it to my situation. Thanks!

<div id="footer-wrap"> <div id="footer"> <ul> <li class="copyright"><a href="#" >copyright</a></li> <li class="facebook"><a href="#" target="_blank">facebook</a></li> <li class="twitter"><a href="#" target="_blank">twitter</a></li> <li class="wordpress"><a href="#" target="_blank">blog</a></li> </ul> </div> <div class="popup"> <p class="popup-wordpress"><span class="popup-icon"></span><span class="popup-text">Check Out Our Blog</span></p> <p class="popup-twitter"><span class="popup-icon"></span><span class="popup-text">Follow us on Twitter</span></p> <p class="popup-facebook"><span class="popup-icon"></span><span class="popup-text">Become a fan on Facebook</span></p> <p class="popup-copyright"><span class="popup-text">Copyright &copy; 2011<br />All Rights Reserved</span></p> </div> </div> $(function() { $('.copyright').hover( function() { $('.popup-copyright').stop().animate({ marginTop: -52 }, 100); }, function() { $('.popup-copyright').stop().animate({ marginTop: 0 }, 100); }); $('.copyright').click(function() { return false }); $('.facebook').hover( function() { $('.popup-facebook').stop().animate({ marginTop: -52 }, 100); }, function() { $('.popup-facebook').stop().animate({ marginTop: 0 }, 100); }); $('.twitter').hover( function() { $('.popup-twitter').stop().animate({ marginTop: -52 }, 100); }, function() { $('.popup-twitter').stop().animate({ marginTop: 0 }, 100); }); $('.wordpress').hover( function() { $('.popup-wordpress').stop().animate({ marginTop: -52 }, 100); }, function() { $('.popup-wordpress').stop().animate({ marginTop: 0 }, 100); }); }); 

Answer 1

If they are the only class on soaring elements, you can do this:

 $('.copyright,.facebook,.twitter,.wordpress').hover( function() { $('.popup-' + this.className).stop().animate({ marginTop: -52 }, 100); }, function() { $('.popup-' + this.className).stop().animate({ marginTop: 0 }, 100); }); $('.copyright').bind('click',false); 

or even a little shorter:

 $('.copyright,.facebook,.twitter,.wordpress').hover( function(e) { $('.popup-' + this.className).stop().animate({ marginTop: e.type === 'mouseenter' ? -52 : 0 }, 100); }); $('.copyright').bind('click',false); 

Note that for .bind('click',false); jQuery 1.4.3 or later is required.

... or better yet, use delegate() ^(docs) .

 $('#footer').delegate('li','hover' function(e) { $('.popup-' + this.className).stop().animate({ marginTop: e.type === 'mouseenter' ? -52 : 0 }, 100); }); $('.copyright').bind('click',false);