Cómo crear un Tooltip con CSS

Hoy les traigo un nuevo tutorial para aprender a usar CSS, en el cuál vamos a crear un Tooltip, o un mensaje emergente que aparecerá cuando acerquemos el cursos a una parte de nuestro texto.

Esta opción es muy buena si tienes información extra o significado para una palabra o grupo de palabras, basta crear la hoja de estilos y usarla cuando queramos, así que después del salto no se pierdan el tutorial.

Estructura HTML

Lo primero es siempre empezar a planear nuestra estructura, en este caso vamos a usar algunas etiquetas <span> para poder crear el espacio para que el Tooltip se pueda apreciar. Por eso el código es el siguiente:

Entonces, tenemos un link que almacena todos los demás elementos, el texto que dice “palabra con tooltip” es donde vamos a poner el texto que va a aparecer como link, el texto normal pues, y en “Aquí va la descripción adicional que mostraremos en el tooltip” vamos a poner el texto que queramos que aparezca dentro de la burbujita flotante, después de eso las <span> las dejamos igual, así como el link, a menos que le quieras poner una URL.

El código lo puedes poner donde quieras que aparezca el Tooltip. En Blogger podemos agregar esto cuando estamos creando nuestra entrada, basta ir a edición HTML para pegar el código.

Hojas de estilo CSS

Ahora nos vamos a enfocar en la hoja de estilos, donde el elemento principal es una clase para los links que contengan las span con todas las clases que están definidas en la estructura HTML, entonces a pesar de que señale a todos los links, sólo funcionará con aquellos que tengan las demás clases definidas.

Lo que podemos ver es que la estructura está un poco complicada, y después de revisar un rato lo más recomendable y creo que al final lo más útil es usar las propiedades de color, en el código está marcado con comentario donde podemos cambiar el color de la burbuja y el del texto de la descripción de la burbuja.

Finalmente

Entonces, si nosotros quisiéramos tener un pequeño ejemplo completo sobre el funcionamiento del Tooltip, el código final sería el siguiente:

Y con esto terminaríamos el tutorial, espero les haya gustado y si tienen alguna duda o comentario no duden en comentar.

Vía ciudadblogger