Question

I’m trying to create an effect similar to a tooltip with jQuery.

I’m reusing the same <div> element (id="tooltip") to display the tooltip. Therefore, I need to constantly move this <div> element every time the user moves the cursor over an element which should display a tooltip. When I use the offset() property, it works fine the first time but then if I move the mouse repeatedly from one icon to the other, the tooltip starts to jump to different locations.

You can try it out here:

http://jsfiddle.net/ZbwjQ/2/

Try moving the mouse from one icon to the other repeatedly, you’ll notice that the tooltip jumps around incorrectly. It should always appear immediately to the right of the icon which is hovered over.

Answer 1

There are several problems in your code.

Divs aren’t self-closing tags:

<div />     <!-- Wrong -->
<div></div> <!-- Good -->

When you have empty divs, add the following declaration in your CSS to ensure they have a body:

div {
  content: "";
}

The jQuery offset() function seems buggy in your case, because of your hidden #tooltip. Prefer the following code to change its offset:

$('#tooltip').css({
  top: o.top,
  left: o.left
});

Additionally, the o‘s creation seems very useless. You just have to modify directly the offsetvariable:

var offset = $(this).offset();
offset.left += $(this).width();
$('#tooltip').css({
    top: offset.top,
    left: offset.left
});

Finally, try not to access several times to the same element with a selector. jQuery will have to find your element in the whole DOM tree everytime you call it.

var tooltip = $("#tooltip"); // Use it in mousenter/mouseleave => Avoids 2 useless selections

// In your mousenter function
var el = $(this); // Use "el" to get offset/width => 1 useless selection avoided

You can find a working jsfiddle here.