Psychotik

solucionando marrones desde 2003

Tooltips animados en CSS3

Pertenece a  Tips  el 2 octubre
Tooltips animados con CSS3

Desde hace tiempo ya podemos hacer tooltips personalizados sin necesidad de javascript ni jquery, ahorrando un puñado de kbs, que según el proyecto seguro que se agradece.

Entrando en materia

Para generar nuestros propios tooltips vamos a aprovecharnos de la propiedad content:”attr(title)”;, para ello generamos, por ejemplo un enlace <a> en nuestro html/php/lo que estemos utilizando:

Enlace con title por defecto:
‹a href="#" title="Soy un enlace sin tooltip personalizado, triste de coj***s"›Tooltip aburrido‹/a›

Tooltip aburrido

Aplicamos a ese enlace la propiedad content:”attr(title)”; ubicada dentro de la propiedad :after y en su estado :hover, ¿cómo? ¿para qué? Pues :after por qué es quién nos va a permitir utilizar esa etiqueta content que hará la magia y :hover por qué, logicamente, solo queremos que se vea el title cuándo pasamos por encima del enlace. Para que todo marche bien conviene que nuestro enlace tenga también algunos estilos, además de los estilos que le quedamos dar para dejarlos bonicos, un position:relative es vital, ya que debemos posicionar en algún sitio nuestro title personalizado, y position siempre ayuda.

Código css:
a.tooltip{
   position:relative;
   padding:6px;
   border-radius:3px;
   background:#fff;
}
    /* Hacemos el estado hover del botón para que no quede tan soso */
   a.tooltip:hover{
   background:#FF9C00;
   box-shadow:inset 2px 2px 1px #995f02;
}
   /* Generamos el elemento :after y la decimos que propiedad content queremos utilizar */
   a.tooltip:hover:after{
   content:attr(title);
   position:absolute;
   /* Le añadimos bottom ya que al llevar un width fijo habrá titles que sean muy largos, así nos garantizamos que el tooltip crece hacia arriba y no aparece por encima del enlace */
   bottom:40px;
   left:10%;
   /* Lo condimentamos para dejarlo bonico, al gusto */
   width:460px;
   padding:2px 5px;
   border-radius:3px;
   color:#fff;
   text-shadow:none;
   background:#00A6B6;
   text-align:center;
}

Resultado:
Tooltip divertido

¿Muy estandar?, cierto, pero gracias a las CSS3 lo podemos hacer algo más “movido”, le vamos a añadir transición y una pequeña animación para que quede algo más fino:
a.tooltip:hover:after{
   width:520px;
   transition:all 0.5s linear;
    /* Le añadimos una animación de 1seg y que al final se quede con las propiedades del 100% */
   animation:ease-in-out 1.5s tooltip forwards;
   -webkit-animation:ease-in-out 1.5s tooltip forwards;
}
@keyframes tooltip{
   0%{
   opacity:0;
   left:0%;
   }
   100%{
   opacity:1;
   left:25%;
   }
}
/* Recordad que hay que copiar el bloque y añadir el prefijo -webkit- para que Chrome y Opera lean la animación */
@-webkit-keyframes tooltip{
   0%{
      opacity:0;
      left:0%;
   }
   100%{
      opacity:1;
      left:25%;
   }
}

Resulado:
Tooltip más divertido

A partir de aquí le podéis dar toda la fantasía que queráis, en el siguiente ejemplo solo añadimos el texto del efecto que queremos a lo que ya tenemos, por ejemplo un efecto de perspectiva:
a.tooltip:hover:after{
   width:240px;
   left:50%;
   margin-left:-120px;
   transition:all 0.5s linear;
   animation:ease-in-out 0.5s tooltip forwards;
   -webkit-animation:ease-in-out 0.5s tooltip forwards;
   transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
}
@keyframes tooltip{
   0%{
      opacity:0;
      transform: perspective(1000px) rotate3d(1, 0, 0, 45deg);
      transform-origin: 50% calc(100% + 10px) 0;
      transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
   }
   100%{
      opacity:1;
      transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
      transform-origin: 50% calc(100% + 10px) 0;
   transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
   }
}
@-webkit-keyframes tooltip{
   0%{
      opacity:0;
      transform: perspective(1000px) rotate3d(1, 0, 0, 45deg);
      transform-origin: 50% calc(100% + 10px) 0;
      transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
   }
   100%{
      opacity:1;
      transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
      transform-origin: 50% calc(100% + 10px) 0;
      transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
   }
}

Resultado:
Tooltip con efecto

A partir de aquí todo es probar. [Recuerda: Si el efecto no se ve suavizado, la solución rápida está en Suavizar las animaciones cuando utilizamos “transform: perspective”.


Volver atrás

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »