Hoy vamos a compartir nueve estupendos estilos y efectos para Tooltips. Los Tooltips se usan para aportar alguna información extra y se pueden encontrar en la mayoría de las páginas web. Estos pequeños ayudantes nos ofrecen una gran oportunidad para añadir algún efecto único y sutil al diseño de nuestra web. Por lo que hoy vamos a mostraros varios ejemplos fantásticos para estos Tooltips.

Utilizaremos las transiciones de CSS y algún SVG para crear formas únicas. Los iconos pertenecen a Font Awesome y las fotos de los perfiles pertenecen a Random User Generator

Tenga en cuenta que algunas propiedades de CSS, como las formas en 3D, sólo son soportadas en los navegadores modernos.

Echemos un vistazo al estilo «sharp»:

<blockquote>
    <p>A man of my <span class="tooltip tooltip-turnright"><span class="tooltip-item">spiritual</span><span class="tooltip-content"><strong>[spir·it·u·al]</strong> affecting the human spirit or soul as opposed to material or physical things</span></span> intensity does not eat <span class="tooltip tooltip-turnleft"><span class="tooltip-item">corpses</span><span class="tooltip-content"><strong>[corpse]</strong> dead body, body, carcass, skeleton, remains, mortal remains, rotten bacon</span></span>.</p>
    <footer><span class="tooltip tooltip-turnright"><span class="tooltip-item">George Bernard Shaw</span><span class="tooltip-content"><strong>George Bernard Shaw</strong> (26 July 1856 – 2 November 1950) was an Irish playwright and a co-founder of the London School of Economics.</span></span></footer>
</blockquote> 

Tenemos dos tipos de variaciones para el tooltip: la primera pone la flechita hacia la izquierda y la segunda la pone hacia la derecha. En este ejemplo usaremos una forma SVG para el tooltip.

Ahora veamos el CSS:

@import url(http://fonts.googleapis.com/css?family=Kalam:700,400);
 
.tooltip {
    position: relative;
    z-index: 999;
}
.tooltip-item {
    font-weight: bold;
    cursor: pointer;
}
.tooltip-content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 9999;
    margin: 0 0 105px -140px;
    padding: 25px;
    width: 280px;
    border-radius: 10px/50%;
    background: #fff;
    color: #dd5864;
    text-align: left;
    font-size: 16px;
    opacity: 0;
    cursor: default;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.tooltip-turnright .tooltip-content {
    transform: translate3d(0,50px,0) rotate3d(1,1,1,6deg);
}
.tooltip-turnleft .tooltip-content {
    transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg);
}
.tooltip:hover .tooltip-content {
    opacity: 1;
    transform: translate3d(0,0,0);
    pointer-events: auto;
}
.tooltip-content::after {
    position: absolute;
    top: 100%;
    width: 60px;
    height: 120px;
    background: url(../img/tooltip3.svg) no-repeat center center;
    background-size: 100%;
    content: '';
    transition: transform 0.3s;
    transform-origin: 50% 0;
}
.tooltip-turnright .tooltip-content::after {
    left: 25%;
    transform: scale3d(-1,1,1) rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
}
 
.tooltip-turnleft .tooltip-content::after {
    right: 25%;
    transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
}
.tooltip-turnright:hover .tooltip-content::after {
    transform: scale3d(-1,1,1) rotate3d(1,1,1,0) translate3d(0,-5px,0);
}
 
.tooltip-turnleft:hover .tooltip-content::after {
    transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
}

Para indicarle al Tooltip hacia que lado queremos la flechita, esto lo hacemos indicándolo en la clase en el elemento span del principio. La clases son «tooltip-turnright» o «tooltip-turnleft«.

<span class="tooltip tooltip-turnright">

Y así de sencillo tendremos nuestro Tooltip. En el siguiente paquete podréis descargar los 9 ejemplos que se muestran en la demo.