Crear pin CSS con mensaje oculto

Anteriormente hemos visto como crear un tooltip o mensaje oculto de forma sencilla, hoy vamos a aprender a crear un pin CSS con mensaje oculto. Si no sabes lo que es un tooltip, te recomiendo pasarte por el anterior tutorial ya que será necesario para poder implementar los pins correctamente.

Implementación


La idea básica de nuestro pin es superponer una imagen a otra, o lo que es lo mismo, colocar nuestro pin encima de la imagen que queramos. Para ello debemos asegurarnos de que nuestra imagen tiene la propiedad relative, en caso contrario nuestros pins no podrán situarse encima de la imagen. Para añadirlo icluye el código style="position:relative" a la imagen o a su clase de tener una.

Una vez tengamos esto lo único que debemos hacer es añadir el código html del pin y su estilo. A continuación os exponemos 6 ejemplos de como podrían quedar vuestros pins. En caso de que te guste alguno solo deberás copiar su código html y su css en tu web, editar el atributo left (distancia horizontal que quieres que tenga tu pin) y top (distancia vertical que quieres que tenga tu pin).

Recuerda que estamos utilizando la librería hint para los mensajes ocultos y que puedes cambiar el texto de posición y de estilo a tu gusto. De igual forma puedes jugar con las imágenes de los pins y sus efectos ¡El limite es tu imaginación!

0 Comentarios

Contesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

©2017 Codictados Comunidad libre para el aprendizaje de codigo Online

o

Inicia Sesión con tu Usuario y Contraseña

o    

¿Olvidó sus datos?