Tooltips usando sólo CSS Cuando diseñás un sitio web o un blog debés tener en cuenta la accesibilidad, y si le agregás información adicional sobre los elementos que...

Tooltips usando sólo CSS

Cuando diseñás un sitio web o un blog debés tener en cuenta la accesibilidad, y si le agregás información adicional sobre los elementos que el usuario ve en la pantalla hará que el visitante se sienta más a gusto en tu sitio.

Una forma de lograr esto es proveer detalles extra acerca de los elementos que puedan ser un tanto complejos a primera vista en una página es la utilización de "tooltips".

Un tooltip (descripción emergente) es un elemento de interfaz gráfica bastante conocido. Es usado en conjunto con un cursor (el puntero del ratón).

Su funcionamiento es simple: colocás el cursor encima de algo, sobre un texto, una imagen o lo que sea, sin hacer clic y enseguida aparece un tooltip que no es más que una pequeña ventanita o cajita con información acerca del elemento en cuestión.

Normalmente funciona como una ayuda adicional en interfaces gráficas para dar a entender al usuario la finalidad o funcionalidad del texto, botón, comando sobre el cual uno posicione el puntero.

Por ejemplo: Poner el puntero del mouse sobre la imagen y el enlace a continuación:

En la red existen infinidad de formas de lograr tooltips lo suficientemente vistosos o llamativos, diferentes técnicas usando elementos como Javascript (a veces con el agregado de frameworks como JQuery entre otros) y CSS.

En este post se hablará acerca de cómo hacer tooltips usando sólo CSS tratando de que se vea en distintos navegadores y usando pizca de CSS3 para lograr "efectos especiales" realmente llamativos.

Antes que nada, veamos cómo va a quedar:

Subí una página de demostración en vivo, podés verla siguiendo [este enlace]

Si te gusta, podés descargar el código fuente [aquí] (zip, 18.8KB)

Los tooltips son feos por naturaleza

La función de los tooltips creo que ya está bien explicada. Los tooltips sirven para proporcionar detalles adicionales acerca de elementos que uno ve en la pantalla.

Por ejemplo, las imágenes tienen su forma de descripción que es el atributo title (o el atributo alt si sos uno de los perdidos desafortunados que siguen usando Internet Explorer), los acrónimos o abreviaturas (con los atributos acronym y abbr que describen o definen una palabra o cualquier información más que quieras agregar sobre lo que se te ocurra en tu página.

Es interesante constatar que son formas simples, efectivas y fáciles de aplicar pero desafortunadamente al parecer son de muy poco intererés para la comunidad de diseñadores. Porque son feísimos...

Cada navegador tiene su propio estilo a la hora de mostrar los tooltips, y también cada sistema operativo.

Por ejemplo, posicioná el cursor sobre la siguiente imagen:
Ejemplo Tooltip
¿Ves? Es ligeramente distinto en cada caso, en Windows 7 por ejemplo es un texto oscuro sobre fondo blanco en gradiente...

Aún así han habido intentos de aplicar nuevas técnicas, el uso de estándares CSS para crear tooltips más vistosos (en reemplazo de eso que muestra el navegador por defecto, como el ejemplo de la imagen de arriba), todo por lograr que se vean más bonitos.

También está el caso del JavaScript (con JQuery, por ejemplo) que permite cosas que el CSS no puede lograr (como el efecto de desvanecimiento al desparecer el tooltip).

Pero destacando el uso que se puede dar al CSS y con un poco de imaginación, inspiración y creatividad podés crear tus propias soluciones espectaculares y adecuarlas especialmente a tu diseño.

Lo que vamos a hacer a continuación son tooltips con puro CSS pero tratando siempre de que navegadores que no soporten CSS3 (como Internet Explorer 8 y anteriores) no se vean tan mal. Claro, no se va a ver tan lindo que digamos, pero funcionará.

Algunos efectos tales como colores, fuentes, algunas imágenes y bordes podrían verse ligeramente distintos dependiendo de la PC del usuario final (como su navegador, sistema operativo, fuentes instaladas, contraste del monitor, etc.)

Se usarán efectos extra, las propiedades border-radius y box-shadow para darle un aspecto visual más sofisticado.

Luego de eso se hará un pequeño repaso de algunas técnicas CSS3 para lograr "efectos especiales" en navegadores más modernos y que estén más "a la onda".

Antes de empezar

Podés usar algún editor de html, (si usás Windows el Notepad2 es una opción liviana y completa, y en Ubuntu el editor gedit es suficiente, cambiando el modo de resaltado correspondiente a HTML)

Descargá el código fuente HTML de ejemplo para echarle una mirada.

En este ejemplo hay diferentes tipos de tooltips (cinco), parecidos entre ellos para mantener una apariencia más o menos pareja pero vos podés experimentar y modificarlos libremente.

Necesitamos una estructura HTML básica de XHTML 1.0 con los elementos del <head> (encabezado) normales del caso.

Sería importante usar un archivo .css aparte para separar los estilos de la estructura más aún si se trata de un página web, esto para ordenar mejor las cosas.

Si sentís que usando jQuery u otro accesorio JavaScript podés agregar más usabilidad a este truco, no hay problema, sos libre de usarlas.

Destripando el código

Mirá atentamente esta porción del código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Ejemplo de Tooltip</title>
</head>
<body>
<h1>Ejemplo de Tooltip CSS!
</h1>
<p>Este es un ejemplo <a class="tooltip" href="#">clasico<span class="classic">Este es solo un ejemplo!</span></a> de tooltip hecho con CSS!</p>
</body>
</html>
Dentro del código (recortado) de arriba se puede apreciar el elemento encabezado (<h1>) (nada especial) y un párrafo (<p>) de texto que contiene un elemento de anclaje (<a>) con un valor class del tooltip.

¿Por qué usar etiquetas de anclaje (anchor tags) para los tooltips?

El anchor tag <a> se usa en vez de otros elementos como <abbr>, <acronym>, <dfn> y otros simple y llanamente por culpa, obra y gracia de Internet Explorer (en su versión 6 directamente no admite el pseudo-selector :hover más allá de los links (<a>). Simplemente por compatilidad se usa <a> (que es un link).

En el código de arriba se puede observar también que <a> contiene a su vez un <span> con el contenido del tooltip. Los elementos <span> están ocultos, se cargan pero no se muestran sino hasta que sea necesario (o sea, al colocar el cursor encima)

Cada <span> en este ejemplo tiene un valor class "classic" (que denota un tooltip de uso más común) o "custom" (con critical, help, info o warning según el esquema de colores personalizado a usar).

El uso de los estilos "custom" (personalizado) tiene un par de características adicionales como el elemento <em> y la imagen que lo precede que actúa como ícono del tooltip, incluso podés usar tus propias imágenes.

CSS Básico

Cuando ya tengas el HTML en tu página, es hora de de intentar que los tooltips hagan su trabajo.

Antes que nada vamos a hacer que se diferencie visualmente el enlace de los tooltips de otros links (que normalmente muestran una línea sólida debajo como un subrayado) con un interesante subrayado con puntos (o rayas) y un cursor de ayuda.

Esto también agregará un color para que se sienta menos como un enlace y más como un elemento hover común.

El otro pedacito de código (.tooltip span) simplemente oculta el tooltip de la pantalla hasta que sea necesario.

Este es el código:
.tooltip {
border-bottom: 1px dotted #000000;
color: #000000;
outline: none;
cursor: help;
text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}

Cómo mostrar los tooltip con CSS

Hasta ahora poner encima el cursor sobre los links no hace absolutamente nada.

Al agregar el siguiente bloque de código podrás observar cómo funcionan los tooltips, no se verá más que el el mecanismo que se usa para mostrarlos sin grandes muestras o cambios en el apartado visual más que el hecho de que cada tooltip está contenido dentro de una forma más o menos rectangular, simplemente establece el código estándar para modificarlo más adelante.

Este es el CSS que muestra los tooltips:
.tooltip:hover span { 
font-family: Calibri, Geneva, Tahoma, Arial , sans-serif;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
}
.tooltip: hover img {
border: 0;
margin: -10px 0 0 -55px;
float: left;
position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
display: block;
padding: 0.2em 0 0.6em 0;
}
.classic {
padding: 0.8em 1em;
}
.custom {
padding: 0.5em 0.8em 0.8em 2em; }* html
a:hover { background: transparent; }
En la última línea podés ver un asterisco al lado del html. Se llama "HTML star hack" y se usa para aplicar un fondo transparente a IE6. Esto se debe a que sí o sí debe darse una referencia a un color de fondo sea este transparente o no, o sino el pseudo elemento hover no funciona correctamente.

Como podrás comprobar con este código ya se puede apreciar correctamente que funcionan los tooltips. Sólo que, como te darás cuenta, no tienen esquema de color alguno como para que contraste y se vea bien.

Si querés podés modificar el font-family: para adecuar el código según las fuentes de tu diseño. Va lo mismo para el font-size: y otros elementos.

.tooltip:hover img controla la posición de la imagen que se muestra en la esquina superior izquierda y .tooltip:hover em sirve para modificar el título del tooltip.

Dándole color a los tooltips con CSS

El siguiente código le dara a cada uno de los cinco estilos de tooltip un esquema de color que encaje con el ícono (si hay alguno).

Una vez que agregues el código actualizá la página y colocá el puntero sobre alguno de los enlaces. Vas a ver un lindo tooltip que se verá y trabajará igual en cualquier navegador.

Agregá este código al CSS para los esquemas de color para comprobar el resultado:
.classic { background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }

Las delicias de la mejora progresiva

En diseño web hay algo llamado "mejora progresiva" que toma la idea de que mientras más avanzado sea el navegador con que el usuario acceda a un sitio web dispondrá de características más avanzadas. Lo contrario de mejora progresiva es la degradación útil, que entre otras cosas significa que un sitio web sigue funcionando correctamente aunque el usuario acceda con un navegador antiguo o limitado en el que no funcionen características más avanzadas o mejoras como en el lamentable caso de Internet Explorer. Hasta ahora hemos usado la degradación útil, o sea, nuestros tooltips deberían funcionar correctamente en la mayoría de los navegadores.

Pero ahora le agregaremos características de mejora progresiva. Se usará la propiedad border-radius para "recortar" los bordes de los tooltips y hacerlos un poquito más redondeados y que parezca menos cuadrado y usando un poco la propiedad box-shadow le daremos un extra de profundidad, como si tuviera alguna sombra.

Esos elementos no funcionarán en todos los navegadores pero en los que sí funcionen se verá realmente bien! :)

Colocá el siguiente código debajo de .tooltip: hover span y actualizá tu página.
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;box
-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

El efecto visual del borde, la sombra y la opacidad harán que los tooltips sean distinguibles de la página y quizá logre a la información y el contraste un poquito más fácil de leer.

Otras mejoras

Podemos seguir añadiendo más mejoras para hacer la experiencia visual de los visitantes mucho más vistosa y llamativa.

Por ejemplo, yo quería que al posicionar el cursor sobre el link, cuando me saliera el tooltip ocurra una transición como si "apareciera" aumentando su opacidad.

Para cada navegador la cosa es un poco distinta. Como normalmente uso Chromium (basado en el motor WebKit) intenté probar las opciones que muestran en webkit.org.

Agregué opacity: 0; dentro de .tooltip span

A continuación en la seción .tooltip:hover span coloqué la siguiente línea:
-webkit-transition: opacity 1s ease;
En el navegador Opera, la operación es sutilmente distinta. Con opacity: 0; en .tooltip span directamente en la misma sección agregué:
-o-transition: opacity 1s;
En Firefox 4 (la versión que soportará oficialmente estas transiciones CSS3) sería algo similar, pero todavía no pude probar:
-moz-transition-property: opacity;-moz-transition-duration: 1s;

Resumiendo lo que hice fue añadir esto en la sección .tooltip span
opacity: 0;
-o-transition: opacity 1s;
-moz-transition-property: opacity;
-moz-transition-duration: 1s;
transition-property: opacity;
transition-duration: 1s;
y esto en .tooltip:hover span
opacity: 1; 
-webkit-transition: opacity 1s;

Y para hacerlo aún mucho más vistoso esto último se le puede agregar esto:
-webkit-transition-property: opacity, top, left;

Y así ir probando como va quedando.

Se ve algo así: [ver ejemplo]

Se supone que en Google Chrome debería mostrar un efecto en que el tooltip aparece desde la izquierda y arriba como si se moviera ligeramente desde ese ángulo con un efecto suave de transición. En Opera el cambio se da en la opacidad. Este ejemplo lo probé usando Opera 10.6 y en Chrome 5.

El abanico de posibilidades es demasiado amplio. Todo es cuestión de ir probando, experimentando hasta que nos salga.

Yo mismo sigo aprendiendo, tocando diversos códigos y dándome cuenta que me falta mucho por aprender... :)

· Adaptación libre de un artículo que vi en SixRevisions
· Lectura recomendada: Tooltips usando CSS (Vagabundia)

¿Te resultó útil? Ver otro post al azar (recomendado)

O usa los siguientes botones para compartir:

1 comentario(s):

Rony @% dijo...

super che cuate voy a actualizar mi blog con esas tags, saludos desde p.j.c

Publicar un comentario

COMENTAR ES GRATIS!

Pero trata de que tu comentario no esté fuera del tema (Off-Topic).
Nada de ataques personales, ni insultos ni críticas destructivas al autor o a otros lectores del blog.
No están permitidos comentarios en MAYÚSCULAS (en internet significa gritar).
Intenta escribir correctamente y no uses lenguaje SMS (usa palabras completas por favor).
Tampoco está permitido el spam en todas sus variantes. Por este motivo los comentarios no serán publicados de manera inmediata sino tras ser filtrados previamente por un moderador.

Muchas gracias por comprender...

Para mostrar tu avatar: edita tu perfil de Blogger antes de comentar.

Nota: Si hay algún link o enlace externo, imagen o vídeo que no funcione correctamente en esta entrada, házmelo saber aquí...