Merida Design Blog

Publicado el | Tutoriales / , ,

Como crear tooltips con CSS

Al crear una aplicación, es muy importante que los conceptos (títulos, etiquetas, etc) empleados en la interfaz sean claros para que se entienda cual es la función de cada elemento, sin embargo, habrá ocasiones en las que se necesite explicar un poco más, pero hacerlo directamente entorpecería el diseño.

Para estos casos es común emplear tooltips o textos de ayuda, que solo aparecen cuando el usuario pasa encima el puntero o presiona el elemento (móviles), esto es especialmente útil en formularios en donde la etiqueta no describe por completo el tipo de valor que se espera.

En este tutorial te mostraré como crear esos tooltips usando únicamente CSS y algunos atributos de HTML.


HTML

Si queremos que el tooltip responda también en dispositivos móviles, debemos emplear un elemento tipo a (enlace), de esa manera podemos mostrar el tooltip durante el estado :active al presionar el enlace.

    <a href="#" title="Texto de ayuda">concepto</a>

Es importante colocar el atributo href="#" para que el elemento responda al estado :active y al colocar un # nos aseguramos que no enlace a ningún lugar y permanezca en el sitio, si se deja el atributo vacío la página se volverá a cargar al hacer click.


CSS

Ahora veamos el código necesario para crear los tooltips.

    a {
        border-bottom: 1px dotted #aaa;
        color: #333;
        position: relative;
        text-decoration: none;
    }
    
    a:hover:before,
    a:hover:after,
    a:active:before,
    a:active:after {
        opacity: 1;
    }
    
    a:before,
    a:after {
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition: all 200ms ease-in;
    }
    
    a:before {
        background-color: #eee;
        border-radius: 3px;
        bottom: 100%;
        content: attr(title);
        font-size: 12px;
        left: 100%;
        padding: .5em 1em;
        white-space: nowrap;
    }
    
    a:after {
        border: 5px solid;
        border-color: #eee transparent transparent #eee;
        content: '';
        left: calc(100% + 3px);
        top: -3px;
        transform: rotate(20deg);
    }

A grandes rasgos, usamos las pseudo-clases :before y :after para crear el cuerpo del tooltip y el pequeño triángulo que le da esa forma de burbuja de conversación.

El tooltip por defecto debe estar oculto (línea 17) y al hacer hover o presionar el elemento, éste se muestra (línea 12).

El atributo “pointer-events: none” que asignamos en la línea 18, tiene la finalidad de cancelar la respuesta a los gestos del mouse, ya que de lo contrario al pasar el mouse sobre el area en que se encuentra el tooltip oculto, éste se mostraría y podría resultar confuso para el usuario.

Otra forma de evitar el problema anterior, es cambiar la propiedad display por none y block respectivamente, pero esa solución no permitiría mostrar la animación de desvanecimiento.


Resultado

Si usas el código anterior para crear tus tooltips, el resultado debe ser algo como el siguiente ejemplo:

See the Pen Simple tooltip demo by Iván Villamil (@ivillamil) on CodePen.15465

Adicionalmente te comparto otro demo con algunas variaciones en donde incluyo la posibilidad de especificar distintas posiciones para el tooltip.

See the Pen CSS Tooltips by Iván Villamil (@ivillamil) on CodePen.15465


Conclusión

Las etiquetas de enlace(a) ya cuentan con la funcionalidad para mostrar tooltips manera nativa, pero el estilo es bastante simple, con esta solución se puede personalizar por completo el estilo de los tooltips para que vaya mas acorde al estilo de nuestra interfaz, con la ventaja adicional de funcionar en dispositivos móviles.



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: