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.