4
\$\begingroup\$

I have this tooltip code that I came up with, using jQuery:

$('div.a')
.bind('mousemove', function(e){
    $('#follow').css({
       left:  e.pageX + 20,
       top:   e.pageY
    });
})
.mouseenter(function() {
    $('#follow').css('display','block');
})
.mouseleave(function() {
    $('#follow').css('display','none');
})

I was wondering if there is anyway to compact it even more than it already is (ignore whitespace).

Here is a jsFiddle, if you'd like to test it.

|improve this question|||||
\$\endgroup\$
1
\$\begingroup\$

Your code is already pretty clean, and makes it easy to see what you're doing. What I can suggest is replacing some of the function calls with jQuery's shortcuts:

  • .mousemove is a shortcut for .bind('mousemove')
  • .offset is (in this case only) a more specific version of .css
  • .hover is a shortcut for both .mouseenter and .mouseleave
  • .show and .hide are shortcuts for .css('display'); additionally they abstract away the handling of the display value (you can transparently change it to something other than block)

and so:

$('div.a')
.mousemove(function(e){
    $('#follow').offset({
       left:  e.pageX + 20,
       top:   e.pageY
    });
})
.hover(function() {
    $('#follow').show();
}, function() {
    $('#follow').hide();
})

Fiddle: http://jsfiddle.net/ycqx58ka/1/

|improve this answer|||||
\$\endgroup\$
  • \$\begingroup\$ mousemove is not a shortcut for .bind('mousemove'), Bind is applicable only if dom is not visible. \$\endgroup\$ – Paritosh Aug 14 '14 at 17:00
  • \$\begingroup\$ @paritosh Unless I'm reading this wrong, that's exactly what it is; ref. line 2599 \$\endgroup\$ – blgt Aug 14 '14 at 17:12
  • \$\begingroup\$ My mistake sorry \$\endgroup\$ – Paritosh Aug 14 '14 at 18:06
  • \$\begingroup\$ -1: .offset() is not equivalent to .css(). .css() is relative to the nearest positioned element, while .offset() is relative to the document. .offset() is also significantly slower because of the calculations required. These details should be explained, instead of the rather vague "in this case only." \$\endgroup\$ – Schism Aug 14 '14 at 19:01
  • \$\begingroup\$ @Schism For the setup in the fiddle, they absolutely are equivalent. I prefer .offset as it's clearer and cleaner. For other cases (corner?), .offset is actually also more robust. As for being slower -- yes, you're right there, when rendering speed matters straight css becomes preferable \$\endgroup\$ – blgt Aug 14 '14 at 21:47
3
\$\begingroup\$

Bind method should be used only when if your element is not loaded into DOM on pageload. So you could attach events to it using bind after wards. also if your using jquery >= 1.7 use 'On' method to achive it. but as per your js fiddle you don't need it at all.

second you could declare a variable to store the jquery object of follow. Make sure about the variable scope though.

var follow=$('#follow');

$('div.a').mousemove(function(e){
    follow.css({
       left:  e.pageX + 20,
       top:   e.pageY
    });
})
.mouseenter(function() {
    follow.css('display','block');
})
.mouseleave(function() {
    follow.css('display','none');
})
|improve this answer|||||
\$\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.