Tooltip Animado para tu Blog o Sitio Web con CSS3

el
Los tooltips son de tanta ayuda para sitios web y Blogs que incluso hay desarrolladores web que crearon tooltips que pueden alojar enlaces.
Como los que aparecen en tutosytips.com.

Demostracion

Para agregar este tooltip a tu sitio web o Blog sigue los siguiente pasos.
  • Para sitios web ir al siguiente enlace: Codigo para Sitios Web y Wordpress
  • Para blogs (Blogger), ve a Plantilla, luego a Edicion de HTML.
  • Busca la etiqueta ]]></b:skin> y encima de ella pega lo siguiente.
/* Tooltip */
.tooltip{
  position: relative;
  display: inline-block;
}
.tooltip span{
  position: absolute;
  width: 150px;
  padding: 8px;
  left: 50%;
  font-size: 13px;
  line-height: 16px;
  margin-left: -88px;
  text-align: center;
  visibility: hidden;
  bottom: 40px; /** Use 30px for simple fade in effect - Removes slide down effect **/
   
  opacity: 0;
   
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
   
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.tooltip:hover span.ttimg{
  opacity: 1;

  visibility: visible;
  margin-bottom: 110%;
  z-index: 100;
}
.tooltip:hover span.tton{
  opacity: 1;
  visibility: visible;
  bottom:0;
  z-index: 100;
}
.tooltip:hover span.ttlink{
  opacity: 1;

  visibility: visible;
  bottom: 25px;
  z-index: 100;
}
.tooltip:hover span.ttlink a{
  color:#fff;
  text-decoration:underline;
}
.tooltip:hover span.ttlink a:hover{
  color:#fff;
  text-decoration:none;
}

/* CSS Down Arrow */   
.tooltip span:after{
  content: '';
  position: absolute;
  bottom: -14px;
  left: 50%;
  margin-left: -9px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.tooltip:hover span{
  opacity: 1;

  visibility: visible;
  bottom: 70px;
  z-index: 100;
}

/* Blue */
.ttblue{}
.ttblue span{
  background: #39F;
  border: 4px solid #39F;
  color: #FFF;
}
.ttblue span:after{
  border-top: 10px solid #39F;
}
.ttblueon span{
  background: #39F;
  color: #FFF;
}
.ttblueon span.tton:after{}
  • Lo que está negreado es editable patra el tooltip, debes tener conocimiento de CSS para editarlo a tu gusto.
  • ◘ - Ancho del Tooltip.
  • ◘ - Radio del Tooltip.
  • ◘ - Espacio dentro del tooltip.
  • ◘ - Tamaño de texto del tooltip.
  • ◘ - Margen hacia bajo.
  • ◘ - Color de fondo.
  • ◘ - Color del borde.
  • ◘ - Color de texto.
  • Guardas los cambios.
  • Listo, ahora cuando hagas una entrada, un gadget HTML o agregues algo a la plantilla directamente puedes hacer lo siguiente.
Enlace
Enlace de EjemploSigueme en Facebook
<a class="tooltip ttblue" href="URL del enlace">Texto del enlace<span class='ttlink'>Texto del tooltip</span></a>
Tip que se sobrepone al texto
Texto del enlaceSiguenos en Twitter
 <a class="tooltip ttblueon" href="URL del enlace">Texto del enlace<span class='tton'>Texto del tooltip</span></a>
Texto solo con tip de enlace.
TextoSiguenos en YouTube
<div class="tooltip ttblue">Texto<span class='ttlink'><a href="URL del enlace del tip">Texto del tooltip</a></span></div>
Imagen
Planet Survival
<a class="tooltip ttblueon" href="URL del enlace"><img src="URL de la imagen"><span class='ttimg'>Texto del tooltip</span></a>

Dificultad: Media
Licencia: Free
Fuente: JohanRicardo.tutosytips.com
eliseo0505
eliseo0505Sobre Mi:
Pienso demaciado.
g+