jQuery tooltip optimization

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:

My tooltip

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

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 = $("")
  .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.

StackExchange Code Review Q#46111, answer score: 2