jQuery tooltip optimization

Question

This is my second jQuery script: a universal tooltip for my entire web page. It took me a couple of days to research and make it work.

Now, I need help from the experts to optimize my newbie code.

This is one of the ways I can show the tooltip:

<a class="tooltip" data-tooltip="this is the text for my tooltip" href="#">My tooltip</a>

jQuery:

$('.tooltip').hover(function(){
 var text = $(this).attr('data-tooltip');
 // get coordinates (top, left) of clicked element
 var offset = $(this).offset();
 // append tooltip to body, hide it, insert text
 // center the tooltip to the clicked element and display it 3 pixels above the clicked element
 $('<p class="tooltipbox"></p>')
 .hide()
 .text(text)
 .appendTo('body')
 .css("left", offset.left - (($(".tooltipbox").outerWidth() - $(this).width()) / 2 )) // center the tooltip
 .css("top", offset.top - $(".tooltipbox").outerHeight() - 3)
 .fadeIn(200);
}, function() {
 // hover out the tooltip box
 $('.tooltipbox').remove();
});

Something simple that works ok. Any way to improve my second jQuery script?

Answer 1

You don't really need a tooltip class on your target element. Since you already have a data-tooltip attribute, that's enough to find the relevant elements:

$("[data-tooltip]") // find all elements with a data-tooltip attribute

This will also let you use the tooltip class for the actual tooltip, which makes more sense, given the name.

You call $(this) multiple times instead of calling it once and storing it a variable, e.g.

var target = $(this);

You're also creating an element in your code, yet you're fetching it back through jQuery. That really isn't necessary, since that can go in a variable too. And you can use jQuery to your advantage a bit more.

var tooltip = $("<p></p>")
 .hide()
 .addClass("tooltipbox")
 .appendTo(document.body);

then, when positioning it, it might be nice with yet more variables, just to improve clarity a bit

var top = offset.top - tooltip.outerHeight() - 3,
 left = offset.left - (tooltip.outerWidth() - target.width()) / 2;
tooltip.css({
 left: left,
 top: top
});

Also, you may want to not hide the tooltip, if the user mouses over it. Doing so will require more trickery, though, so it's a bit out-of-scope for this answer. But the point is that right now, moving over the tooltip causes it to disappear, which can cause a bunch of flickering, since it's being displayed practically where the cursor already is.

Lastly, it'd be better to use a div or span for the tooltip. While not strictly necessary, the div element is a better fit, because it's semantically neutral, and span just means "a run of text". A p element means paragraph, but a tooltip is usually just a tiny snippet; not really a paragraph in and of itself. There's nothing preventing you from using a p or any other element, but that also means you might as well use a more appropriate element than p.