Cómo crear una información sobre herramientas Simple CSS3

La información sobre herramientas es una excelente manera de mostrarle a tu usuario más información simplemente pasando el cursor sobre una imagen o texto. Se pueden usar, por ejemplo, para proporcionar subtítulos para imágenes, o descripciones más largas para enlaces, o cualquier información útil que mejore la experiencia del usuario de su sitio, sin interferir en el diseño.

Hoy voy a mostrarte cómo crear una información sobre herramientas sencilla usando HTML y CSS para mostrar la etiqueta del título de tus hipervínculos.

Comencemos creando un marcado simple para el enlace. Necesitamos darle un título que será el contenido de información sobre herramientas, y asignarle una clase:

CSS3 Tooltip

El siguiente paso es crear un estilo rudimentario para nuestra clase de información sobre herramientas:

.tooltip{display: inline;position: relative;}

Ahora estamos mostrando nuestra información sobre herramientas en línea con nuestro enlace usando posicionamiento relativo. A continuación, queremos crear un cuadro redondeado para formar el cuerpo de la información sobre herramientas y colocarlo de modo que flote sobre el enlace:

.tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}

Estamos utilizando el: selector de desplazamiento que selecciona un elemento, en este caso nuestro enlace, al pasar el mouse y el selector: after, que inserta contenido después del elemento seleccionado. Hemos especificado un fondo negro con 80% de opacidad, y para navegadores que no admiten colores RGBA, hemos proporcionado un fondo gris oscuro.

Las esquinas ligeramente redondeadas se crean utilizando el atributo border-radius y hemos establecido el color del texto en blanco. Por último, hemos colocado el cuadro de información sobre herramientas a la izquierda del enlace y hemos añadido un pequeño margen.

Además del estilo y el posicionamiento, hemos establecido la propiedad del contenido:

content: attr(title);

Esta propiedad nos permite insertar el contenido que queremos, que puede ser una cadena, un archivo multimedia o un atributo del elemento. En este caso, estamos utilizando el atributo de título del enlace.

Ahora, cuando coloque el cursor sobre su enlace, aparecerá una información sobre herramientas con el texto que haya establecido como título del enlace. Sin embargo, tenemos un problema: la información del título se muestra dos veces: una en la información sobre herramientas y otra en el navegador. Para solucionar esto, necesitamos hacer un pequeño cambio en nuestro HTML:

CSS3 Tooltip 

Lo que hemos hecho aquí es envolver el texto del enlace en una etiqueta span con su propio atributo de título. Ahora el navegador mostrará el título establecido en la etiqueta span cuando el enlace esté sobrevolado.

Para finalizar agregaremos una flecha al pie de la información sobre herramientas, para darle ese toque extra de estilo. Hacemos esto usando el selector: before y algunos estilos de borde:

.tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 50%;position: absolute;z-index: 99;}

Estamos utilizando unos pocos hacks fronterizos para crear el efecto de una flecha: establecer los colores del borde a la izquierda y la derecha para que sean transparentes y controlar el ancho del borde. También hemos colocado la flecha para que se encuentre en la parte inferior del cuadro de información sobre herramientas.

Y ahí lo tienes, una información sobre herramientas simple con la etiqueta del título del elemento sobre el que se colocó. También puede usar esto para las etiquetas alt de la imagen, o simplemente poner su propio texto en el CSS para que aparezca donde lo desee.

Puedes ver un demostración de trabajo aquí .

¿Cómo construyes tooltips? ¿Has usado esta técnica en un sitio? Háganos saber en los comentarios.

Imagen / miniatura destacada, imagen de pista a través de Shutterstock.