why is this tooltip following the opposite vertical direction?

I'm developi开发者_运维知识库ng a 'home-made' tooltip using Jquery and CSS,

Seems to work OK,

http://jsfiddle.net/GLZFc/

It gets positioned ontop of the 'trigger' element (and horizontally centered), but when i move the mouse up it goes down and the opposite way,

what i'm I doing wrong?

Change "bottom:" to "top:" in your css assignments.

http://jsfiddle.net/GLZFc/1/

I also solved your question about the non-fading borders by prepending .find("span").andSelf() to the fadeIn and fadeOut methods. This will explicitly fade out all "span" tags inside the DIV, although I honestly don't understand why it's necessary (this might be a jQuery bug):

http://jsfiddle.net/GLZFc/21/

you are using bottom, not top.

http://jsfiddle.net/GLZFc/2/