CSS3 webkit fading in a tooltip

Question

I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I was going for a tooltip effect that when you hover a link, the tooltip appears, but fades in using only CSS3.

I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's initally positioned left:-999px;.

So basically, what am I doing wrong/is what I was going for possible? (Note I don't want to do anything with JS/JQuery, was just curious to see if I could do it in CSS)

You can see and play with it here.

Answer 1

Your span is still in the document flow.

You can remove it by setting its display to none, as the comment above suggests, or setting its position to absolute, which seems to be what you were getting at to hide it off the left edge of the screen.

Answer 2

You need to set the tool tip to not even be shown normally.

#one a.tooltip span {
//display:block;
display:none; 
....
}

Edit: It seem that rather then set display to none, just position to absolute.
Edit2: it seems I was beaten to it.