Question

Take a look at this fiddle: http://jsfiddle.net/BramVanroy/tKL8E/

When you hover “contact” and then to its sub item “adverteren”, the tooltip is displayed above the item instead of next to it. When you then go back with your mouse to “contact” and again go back to “adverteren”, the tooltip displays just fine. How can this be?

Relevant code:

var condition = offL > ((wW / 2) - $this.width()),
  properties = {},
  cssProp = {};

if (condition) {
  properties = {
    "left": (offL - tooltip.width() - 30)
  };
} else {
  properties = {
    "left": (offL + $this.width() + 25)
  };
}
$.extend(properties, {
  "top": ($this.offset().top + (posT / 2) - (tooltip.height() / 2))
});

tooltip.stop(true).text(title).animate(properties, 300).fadeTo(200, 1);

Answer 1

this is because you calculate the left position based on tooltip width before setting the new text into it, or before browser engine re-calculate the element size.

let me check once again to find the solution or work-around.

UPDATE:
change your code fragment like this

tooltip.stop(true).text(title); // set the new text here

var condition = offL > ((wW / 2) - $this.width()),
  properties = {},
  cssProp = {};

if (condition) {
  properties = {
    "left": (offL - tooltip.width() - 30)
  };
} else {
  properties = {
    "left": (offL + $this.width() + 25)
  };
}
$.extend(properties, {
  "top": ($this.offset().top + (posT / 2) - (tooltip.height() / 2))
});

//and not here as you use width property to calculate the element position which is being changed when you change element text
tooltip.animate(properties, 300).fadeTo(200, 1);

check this out http://jsfiddle.net/tKL8E/42/