Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Tooltips con CSS, por que no me funciona? (casi aporte) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/03/2010, 08:33
 
Fecha de Ingreso: febrero-2009
Mensajes: 580
Antigüedad: 8 años, 10 meses
Puntos: 13
Tooltips con CSS, por que no me funciona? (casi aporte)

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!!
__________________
¿ya conoces la red social de cocina? descubre y comparte recetas de cocina
TONIWEB, un programador web freelance

Última edición por Bam_Margera; 08/03/2010 a las 09:03 Razón: Errores
  #2 (permalink)  
Antiguo 08/03/2010, 08:54
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Tooltips con CSS, por que no me funciona? (casi aporte)

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

También, no encontré ningún enlace con class="tooltip"
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 08/03/2010, 08:58
 
Fecha de Ingreso: febrero-2009
Mensajes: 580
Antigüedad: 8 años, 10 meses
Puntos: 13
Respuesta: Tooltips con CSS, por que no me funciona? (casi aporte)

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
__________________
¿ya conoces la red social de cocina? descubre y comparte recetas de cocina
TONIWEB, un programador web freelance

Etiquetas: enlace, mouse, raton, tooltip
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 05:02.