Seguramente alguna vez hayas querido mostrar un texto vinculado a una palabra o imagen pero que a su vez no interfiriera con el entorno de la web, que esté oculto. Pues bien, con la librería hint.css es posible hacer esto de una forma sencilla.

Antes que nada deberemos descargar la librería mediante github y abajo a la derecha hacemos clic en “Download Zip”. Una vez la tengas deberás subir el archivo hint.css a tu web e isertar en el </head> el siguiente código

¡Listo! Ya tienes incorporada la librería hint.css en tu web, para utilizarla basta con añadir la clase y el texto oculto que quieras mostrar tal que así

Tooltip hacia arriba

¿A que mola? Pues esto no es todo, podréis añadirle la clase a cualquier etiqueta que contenga texto e incluso, a una imagen

Posiciones

Si quieres cambiar la posición en la que se situa el tooltip CSS deberás cambiar la clase hint--top por hint-bottom, hint-left o hint-right para que el tooltip CSS salga arriba, abajo, a la izquierda o a la derecha respectivamente

Tooltip CSS hacia arriba

Tooltip CSS hacia abajo

Tooltip CSS hacia la izquierda

Tooltip CSS hacia derecha

Estilo

Aparte de lo ya expuesto esta librería también cuenta con algunas personalizaciones en cuanto a forma y color que se pueden utilizar añadiendo las clases

Mensaje de exito de la clase hint--success

Mensaje de error hint--error

Mensaje de informacion hint--info

Mensaje de peligro hint--warning

Mensaje siempre visible hint--always

Mensaje con esquinas redondeadas hint--rounded

Mensaje sin animación hint--no-animate

Mensaje con diferente animación hint--bounce

Recuerda que para conseguir estos efectos deberemos mezclar la clase del efecto y la clase de la posición del tooltip CSS y que para ello es necesario separarlas con un espacio class="hint--top hint-warning". Si esto te sabe a poco y quieres personalizar un poco más este tipo de tooltips te invito a que modifiques el fichero hint.css y crees tu propio estilo.