Consulta

[gusphil]

Hola tengo una duda... tengo colocados estos dos especies de tooltips pero no puedo lograr que primero aparezca uno y después el otro. Que hago mal ?

el Css es este:

Código HTML:

label {
	  position: relative;
 }

		.box {
	position: absolute;
	left: 24px;
	top: 17px;
	z-index: 100;
	/* Prevent some white flashing in Safari 5.1 */
			-webkit-backface-visibility: hidden;
	background-color: #eeeeee;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#eeeeee));
	background-image: -webkit-linear-gradient(top, #eeeeee, #eeeeee);
	background-image:    -moz-linear-gradient(top, #eeeeee, #eeeeee);
	background-image:     -ms-linear-gradient(top, #eeeeee, #eeeeee);
	background-image:      -o-linear-gradient(top, #eeeeee, #eeeeee);
	-moz-border-radius:    20px;
	-webkit-border-radius: 20px;
	border-radius:         20px;
	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
	width: 445px;
	padding: 20px;
	margin: 24px 0;
	opacity: 0;
	-webkit-transform: scale(0) skew(50deg);
	-moz-transform:    scale(0) skew(50deg);
	-ms-transform:     scale(0) skew(50deg);
	-o-transform:      scale(0) skew(50deg);
	-webkit-transform-origin: 0px -30px;
	-moz-transform-origin:    0px -30px;
	-ms-transform-origin:     0px -30px;
	-o-transform-origin:      0px -30px;

			-webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
			-moz-transition:    -moz-transform    ease-out .35s, opacity ease-out .4s;
			-ms-transition:     -ms-transform     ease-out .35s, opacity ease-out .4s;
			-o-transition:      -o-transform      ease-out .35s, opacity ease-out .4s;
		}
		
		.box:after {
			content: "";
			position: absolute;
			bottom: 100%;
			left: 30px;
			border-bottom: 20px solid #eee;
			border-left:   14px solid transparent;
			border-right:  14px solid transparent;
			width:  0;
			height: 0;
		}
		
		.popUpControl:checked ~ label > .box {
			opacity: 1;
			-webkit-transform: scale(1) skew(0deg);
			-moz-transform:    scale(1) skew(0deg);
			-ms-transform:     scale(1) skew(0deg);
			-o-transform:      scale(1) skew(0deg);
		}
		.popUpControl { 
		  display: none; 
		}
		
		.button {
			background: blue;
			color: white;
			padding: 5px;
			border-radius: 5px;
		}
		
		/* For dog example */
		.box img {
	  		-moz-border-radius:    10px; 
        -webkit-border-radius: 10px; 
        border-radius:         10px; 
	  }
		#doggiezzz:checked ~ label > span:first-child {
			display: none;
		}
		#doggiezzz:checked ~ label:before {
			content: "Less Dog!";
		}
		
		
		/* For link example */
		.link {
	color:#999;
	text-decoration:none;
	text-transform:none;
	
}
		.title { display: block; 
		font-weight: bold;
		 margin: 0 0 10px 0;
		  color: black; font: bold 16px Sans-Serif; text-decoration: none; }
    .copy { color: black; 
			text-decoration: none;  }

Y el HTML es este !

Código HTML:

<input type="checkbox" id="linkie" class="popUpControl">
			<label for="linkie" class="link">
			   <span class="parrafodos">Condrósteos [1]</span>
			   <span class="box">
  			   <span class="title"><img src="imagenes/1315916777_wikipedia.png" width="128" height="128" class="fotosdos"/><br />
  			   Definición:</span>
               <span class="copy">Los condrósteos (Chondrostei) es una de las ......d.</span></span></span></label>          

<input type="checkbox" id="linkie" class="popUpControl">
			<label for="linkie" class="link">
			   <span class="parrafodos">Condrósteos [1]</span>
			   <span class="box">
  			   <span class="title"><img src="imagenes/1315916777_wikipedia.png" width="128" height="128" class="fotosdos"/><br />
  			   Definición:</span>
               <span class="copy">Los condrósteos (Chondrostei) es una de las dos...... </span></span></span></label> 

Desde ya muchas gracias y saludos a todos !