Tutorial – Tooltips a los enlace solo con CSS

Con esta tecnica tooltips podemos añadir mensaje personalizados a un link o alguna parte del código, esto lo podemos hacer de muchas maneras, por ejemplo utilizando javascripts, hoy lo vamos a hacer con CSS fácilmente utilizando los pseudo-elementos.

esto es lo que vamos a conseguir:

tooltip

El HTML:

Lo único que hacemos acá en el HTML es darle un atributo de descripción tooltip (data- Attributes) a él o los links que queramos que tenga esta característica de mostrar el tooltips mostrando el mensaje en cuestión.

El CSS:

1 – Posicionamos el link, le quitamos la decoración del texto link por que también afectaría el mensaje que saldrá en el tooltip y se lo colocamos con border-botom, y estilizamos el texto enlace.
2
– Con los Pseudo-elementos after mostramos el cuerpo del tooltips, asignamos el color del texto de la caja, los bordes redondeados, lo posicionamos en fin todo lo que tiene que ver con la caja donde se mostrara el mensaje, y por ultimo le damos display:none para esconder la caja en estado normal.
3– Luego con a:before hacemos el cuadrado que convertimos en triangulo con técnicas css lo posicionamos absolutamente debajo de la caja after que muestra la caja que muestra el texto y también le damos display:none para esconderlo de el link en su estado normal.
4 – Y en el estado hover mostramos lo que hemos construido anteriormente y hemos escondido con display:none

Resultado del Tooltips con Css

Esto lo podemos estilizar mas, podemos añadir transiciones de CSS3 para un mejor efecto de aparición o algún degradado para mejorar la apariencia, pero ya esto queda a tu imaginación.

 

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

6 Respuestas

  1. CrafterSama dice:

    Amigo, de verdad no haces nada extra para que se vea el tooltip? yo trato de aplicarlo y no me sale… Estoy Usando Firefox 15! xP

  2. AlexWeb dice:

    Ok, este tips esta bueno y facil de hacer