TooltipStylesInspiration

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.

Ejemplo Tooltip Sharp

 

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.

Sobre Reacción Estudio

Somos un estudio informático formado por jóvenes centrados en el desarrollo web, el diseño gráfico y la fotografía. Puedes solicitar presupuesto para tu proyecto a través de nuestra página web o por teléfono, pero en este blog hablaremos de todo lo que engloba el desarrollo web a día de hoy.


Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR