jQuery tooltip optimization
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 = $("&lt;p&gt;&lt;/p&gt;")
  .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.