views:

520

answers:

2

HI, 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.

+2  A: 

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.

thecoshman
this is true, but then the fade doesn't work.
Kyle Sevenoaks
+1 for being beatne to it. Right answer.
Kyle Sevenoaks
I like the way that works out. "Your slow... have some rep!" I could get along quite happily like this :D ... now, how can I make money from rep?
thecoshman
Now making money out of it would be one hell of an achievement!
Kyle Sevenoaks
+1  A: 

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.

ajm
Position:absolute; is the way to do it :) Thanks!
Kyle Sevenoaks