Tooltips con CSS, por que no me funciona? (casi aporte)

Bam_Margera · #1 (**permalink**) 08/03/2010, 08:33

Muy buenas

Encontre este codigo para agregar tooltips a los enlaces solo usando CSS

Código:

.a span {display: none;}
.a:hover span {display: inline;} 

 

/* The above hover change defeats the
  IE/Win display changing bug */
 
.a:hover span {
  display: block;
  background-color:#FFC;
    border: 1px solid #FC9;

  } 
.a {position: relative;}
 
.a:hover span {
  color:#220000;
.a:5px;
  position: absolute;
  bottom: 25px;
width:300%;
height:auto;
  left: 20px;
  display: block;
  background-color:#FFC;
  border: 1px solid #FC9;
  }

Modo de uso (funciona!)

Código:

<a href="#">Texto Enlace<span>Texto tooltip</span></a>

y por conflictos con un script de traduccion, decidi que solo se aplicara a una clase, tooltip, por lo que adapte el codigo a:

Cita:

a.tooltip span {display: none;}
a.tooltip:hover span {display: inline;}

/* The above hover change defeats the
IE/Win display changing bug */

a.tooltip:hover span {
display: block;
background-color:#FFC;
border: 1px solid #FC9;

}
a.tooltip {position: relative;}

a.tooltip:hover span {
color:#220000;
padding:5px;
position: absolute;
bottom: 25px;
width:300%;
height:auto;
left: 20px;
display: block;
background-color:#FFC;
border: 1px solid #FC9;
}

E intento usarlo:

Código:

<a class="tooltip" href="#">Texto Enlace<span>Texto tooltip</span></a>

Pero no funciona, es decir no oculta y muestra el tooltip sino que siempre esta ahi,

podeis verlo en

http://keepyourlinks.com/link1.php?id=467

Que hago mal? gracias!!

David · #2 (**permalink**) 08/03/2010, 08:54

Los estilos deben estar en el <head>, no en el cuerpo del documento.

También, no encontré ningún enlace con class="tooltip"

Bam_Margera · #3 (**permalink**) 08/03/2010, 08:58

Pues todos los iconos de donde pone "share this link" son de esa clase,

Tenias razon, he hecho mal un copy paste y habia dos etiquetas body, pero me sigue sin funcionar.... :S

-edit-

Bueno, sere lelo, no habia escrito el simbolo = en el class="tooltip", ya me funciona perfectamente y solo para los enlaces de esta clase :) otra soluciona mas optima, supongo que seria, que aplicar la clase tooltip al span, y asi simplemente hay que agregar un span class tooltip en un enlace (y no tener que cambiarle la clase al enlace que quieres agregarle un span (tooltip ))

En fin, gracias! :D