fade out doesn't work

Guys, why does fade in work, but fade out doesn't. I want it to stay for a while when a user moves a cursor away...

This is code:

        .tooltip {
            border-bottom: 1px dotted #000000; color: #000000; outline: none;
            cursor: help; text-decoration: none;
            position: relative;
        }
        .tooltip span {
            margin-left: -999em;
            position: absolute;
            visibility:hidden;
            opacity:0;
            transition:visibility 0.5s linear 0.5s,opacity 0.5s linear;
        }
        .tooltip:hover span {
            border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            font-family: Calibri, Tahoma, Geneva, sans-serif;
            position: absolute; left: 1em; top: 2em; z-index: 99;
            margin-left: 0; width: 250px;
            visibility:visible;
            opacity:1;
            transition-delay:0s;

Code (markup):

 

First you're getting ALL transitions on the out state to zero, that's not gonna work. Second, the margin change is firing immediately, when you need to add a transition delay to it. You might also have better results if you use "left" instead of "margin-left" to move it of the screen.

 

Here, try this:

.tooltip {
	position:relative;
	zoom:1; /* trip haslayout, fix IE positioning bugs */
	test-decoration:none;
	cursor:help;
	color:#000;
	line-height:1.5em;
	outline:none;
	border-bottom:1px dotted #000;
}

.tooltip span {
	position:absolute;
	left:-999em;
	top:2em;
	padding:0.25em 0.5em;
	font:normal 100%/125% calibri, tahoma, geneva, sans-serif;
	-webkit-border-radius:0.5em;
	border-radius:0.5em;
	-webkit-box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.2);
	box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.2);
	-webkit-opacity:0;
	opacity:0;
	transition:opacity 0.5s, left 0 0.5s;
}

.tooltip:hover span {
	left:1em;
	-webkit-opacity:1;
	opacity:1;
	transition:opacity 0.5s, left 0;
}

Code (markup):

It's all about where you declare your properties. The values you want to show during the fade (appearance like colors and borders) belong in the default state for the element -- you have a perfectly good 'left' available to hide it with so there's no reason to be dicking with 'visibility', and the real key is knowing where to put your transition delays -- you need to make the part that sets it invisible (left) be delayed until after the fade is done in the DEFAULT state, not the hover one.

Oh, and you don't need to say -moz anymore. Mozilla has officially dropped vendor prefixes... as has Opera and Google. That just leaves crApple with their heads up their arse, just in time for IE to start using them.

 

deathshadow,
thank you very much for you're excellent explanation! I have tried to copy/paste you're reworked code but it's not working, no transition at all. I will try to play a bit to see what is not working. I'll come back if I manage to do something.

 

I forgot to include the -webkit- transitions for Safari... Q: were you testing in Safari (garbage) or IE9/earlier (even bigger garbage)? Also I should have asked this sooner, what's YOUR markup look like? I assumed this was a span in a span thus:

	<span class="tooltip">
		Test
		<span>This is a test tooltip</span>
	<!-- .tooltip --></span>

Code (markup):

One of the things to remember, CSS without the markup is gibberish. My bad for not mentioning that sooner.

Here's a working demo:
http://www.cutcodedown.com/for_others/budimir/tooltips.html

Tested working in the latest FF, Safari and Chrome, Opera 12 and Opera 17, and IE 10+. You will NOT have fade-in or fade-out in IE9/earlier since IE9/earlier doesn't support CSS3 transitions... likewise anything prior to FF23 won't work since we didn't include -moz-, but with FF auto-updating for most users I wouldn't worry about that. (anyone not updated to FF24 probably isn't smart enough to run FF in the first place).

... as to IE9/earlier, that's a serious "OH WELL" in my book when it comes to something simple like an animation. They don't get the fade in/out, who cares. Does it still appear/disappear? Fine. That's all we need. It's called "Graceful degradation"; it still works, just not as 'pretty' -- Oh well. (I do NOT advise using any sort of 'shim/polyfill' nonsense just for CSS3 effects -- causes more problems than it solves)

 

I'm using firefox 25.0.1. I have looked at you're demo and maybe I'm not explaning something properly. In you're demo tooltip goes away instantly.

The thing I want is that when a user moves mouse away, tooltip slowly goes away. In this way it goes away immediatly. In my example, I have achieved that tooltip displays slowly, but it goes away instantly.

My markup is

<td width="120"><a class="tooltip" href="#">'.$kataloski_broj.'<span class="custom info"><img src="tooltip/Info.png" alt="Information" height="48" width="48" />Kataloški broj: '.$kataloski_broj.' <br /> VPC: '.$neto_VPC.' kn <br /> PVPC: '.$preporucena_VPC.' kn</span></a>

Code (markup):

 

Worked in FF win7 here... but for laughs tried XP (in virtualBox) and it behaves like you said... turns out SOME builds of FF are too stupid to realize that zero is zero, regardless of the metric. (shades of Nyetscape 4, but again Mozilla is Nyetscapes sweetly retarded cousin).

Uploaded copy that works, have to actually state 0s instead of just 0 -- which is really foxtarded.

Love how the allegedly same version of a browser can behave differently across OS -- or even on the same OS across different hardware. In that way FF is more screwed up than IE; at least with IE people admit it has problems and they're well documented, instead of the dipshits pouring out of the works screaming at you "there's nothing wrong with Firefox" if you dare badmouth it. Sorry, venting...

 

Excellent! That' did the trick. I just need to tweek some things now and that's it.

Thank you very much for you're effort and patience to work with me.