Los tooltips (descripciones) son una gran manera de mostrar más información al usuario y simplemente se abren sobre una imagen o un texto. Se pueden utilizar, por ejemplo, para proporcionar subtítulos para imágenes, o más descripciones de los vínculos o cualquier información útil que podría mejorar la experiencia del usuario de un sitio sin inmiscuirse en el diseño.
Hoy voy a mostrar cómo crear un sencillo tooltip utilizando HTML y CSS para mostrar la etiqueta del título de un hipervínculo.
Vamos a empezar por la creación de algunas marcas simples para el enlace. Tenemos que darle un título que será el contenido de la información y asignarle una clase:
<a title="Esta es una información sobre el enlace con un Tooltip." class="tooltip">CSS3 Tooltip</a>
El siguiente paso es crear un poco de estilo rudimentario para nuestra clase del tooltip:
.tooltip{
display: inline;
position: relative;
}
Ahora estamos mostrando nuestra línea tooltip con nuestro vínculo con posicionamiento relativo. Ahora vamos a crear un recuadro redondeado para formar el cuerpo de la información sobre el tooltip 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 usando el selector :hover que selecciona un elemento, en este caso nuestro enlace, on mouseover y el selector :after, que inserta el contenido después del elemento seleccionado. Hemos especificado un fondo negro con un 80% de opacidad, y para los navegadores que no admitan colores RGBA hemos proporcionado un fondo gris oscuro.
Las esquinas ligeramente redondeadas se crean mediante el atributo border-radius y hemos puesto el color del texto a blanco. Por último, hemos colocado la caja del tooltip desde la izquierda del enlace y añadiendo un poco de relleno.
Para el estilo y el posicionamiento estableceremos la propiedad content:
content: attr(title);
Esta propiedad nos permite insertar el contenido que queramos, puede ser una cadena, un archivo multimedia o un atributo del elemento. En este caso estamos usando el atributo title del enlace.
Ahora, cuando se pasa el ratón sobre el enlace aparecerá un texto de ayuda encima de él con el texto que establecimos como el título del enlace.
Sin embargo tenemos un problema, la información del título se muestra dos veces: una vez en la descripción y otra vez por el navegador. Para solucionar esto tenemos que hacer un pequeño cambio en nuestro HTML:
<a href="#" title="Esta es una información sobre el enlace con un Tooltip."><span title="More">CSS3 Tooltip</span></a>
Lo que hemos hecho aquí es que se ajuste el texto del enlace con una etiqueta span con su propio atributo title. Ahora el navegador mostrará el título situado en la etiqueta span cuando pasemos el ratón sobre el enlace.
Para terminar vamos a añadir una flecha en la parte inferior de la descripción, para darle un toque de estilo extra. Hacemos esto mediante el uso del selector :before y algunos estilos de borde (border):
.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;
}
Aquí estamos utilizando unos pocos hacks border para crear el efecto de una flecha: establecer los colores del borde de la izquierda y la derecha, la transparencia y el control del ancho de los bordes. También hemos posicionado la flecha para que se aparezca en la parte inferior del cuadro de información del tooltip.
Y ahí está: una descripción sencilla con la etiqueta de título del elemento cuando pasamos el ratón sobre el enlace. También se podría utilizar esto para la etiqueta alt de imagen, o incluso poner tu propio texto en el CSS para que aparezca lo que desees.
Puedes ver una demostración del trabajo aquí.
Y aquí está el código completo de la página de ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>CSS3 tooltip</title>
<style type="text/css">
.tooltip{
display: inline;
position: relative;
}
.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;
}
.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;
}
</style>
</head>
<body>
<br /><br /><br /><br />
<a href="#" title="Esta es una información sobre el enlace con un Tooltip." class="tooltip"><span title="More">CSS3 Tooltip</span></a>
</body>
</html>
