Tooltips are mispositioned on hover

Question

I cannot for the life of me figure out why the jQuery Tools Tooltips are showing up in the wrong place. Hover over the one of the three gray boxes on this page (e.g. "screen & voice recording"), and the tips should show up on top of the box centered.

http://bit.ly/bdJLEh

Answer 1

There is an offset property that can be uses to nudge the tooltip to correct position: http://flowplayer.org/tools/tooltip/index.html#positioning. Just scroll up a bit to the table and there it explains the offset property. Just be sure you check the site on multiple browsers, so that you can be sure the offset doesn't need to change.

It looks to me that the offset should be about [0, -150]. Try this:

$(".tooltip").tooltip({
    track: true,
    delay: 0,
    showURL: false,
    showBody: " - ",
    fade: 250,
    offset : [0, -150]
});

Answer 2

On the element style in the source code (checked with Firebug) I found this:

for #recording-tip

element.style 
{
display:none;
    left:371.5px;
opacity:0;
position:absolute;
top:391.2px;
}

This left property is causing it to display in the "wrong" place. I use the same plugin for my tooltips, remove this left property in the style and you should be set :)

Edit: After some more playing around, I found out that this is added by the jQuery itself, but this isn't present in the version I am using, are you using some custom animation or effects?