Sweet Titles, tooltips semi transparente para los enlaces

En XYBERNETICOS nos muestran a Sweet Titles es un script que nos permite generar en nuestros enlaces tooltips. Los tooltips son esos mensajes emergentes que vemos al poner nuestro cursor sobre un enlace determinado. En este caso los mostraremos en una caja emergente semi transparente muy agradable y que podemos personalizar a nuestros gustos mediante css. Puedes ver una Demo del efecto.

Puedes ver el artículo completo con toda la información y los códigos y el script en Sweet Titles: Bonitos Tooltips semi transparente para nuestros enlaces.

La imagen es solo un ejemplo de lo que es un tooltips:

Para más información dale un vistazo a éste enlace: Karen asks the CSS Guy about CSS tooltips without Javascript that show on click instead of hover (Ask the CSS Guy).

Cómo usar Tooltips

En el blog de SERGIO GAGO, nos habla sobre el uso de los tooltips son esos pequeños (o no tan pequeños) mensajes emergentes que nos aparecen, generalmente cuando pasamos el ratón por encima de determinados elementos.

Son un recurso muy bueno para ampliar información de estructuras de nuestro sitio, o del destino de enlaces y mecanismos de interacción con el usuario. Pero cuidado, también pueden ser un arma de doble filo.

Los tooltips son un elemento no esperado en los lugares que no corresponden, hasta el punto que pueden resultar molestos. Si el área de activación es demasiado grande nos puede costar hacerlo desaparecer, y el mismo tooltip puede ocultarnos información que es relevante para ese contenido. Al fin y al cabo, general sorpresa al usuario, y eso no siempre es bueno.

Así, hay una serie de normas básicas que se deben cumplir (y que podéis completar si os parece…).

1. No recargar la página de tooltips. Enseñemos al usuario, pero no pensemos que es tonto (aunque lo sea).
2. Nunca poner tooltips en áreas grandes, de más de 10 – 15px de lado. Por supuesto, nunca dentro de fotos, salvo que sean muy pequeños, y no obtrusivos.
3. El tooltip no debería aparecer inmediatamente, ni demasiado tarde. Si aparece instantaneamente, el usuario lo activará sin desearlo, y si tarda demasiado, se cansará o pensará que no hay nada.
4. Hacerlo accesible. Si desactivamos tanto javascript como CSS la página debería seguir viéndose bien, y a ser posible, también el contenido del tooltip.
5. Si lo ponemos sobre un enlace, es preferible usar el tag “title” que es mucho más semántico, y colocar una pequeña imagen que indique atención (un pequeño interrogante) que active el tooltip. Aunque cada navegador implementa el title de forma distinta, se puede configurar un script para que saque ese contenido con varios segundos de onHover.
6. Aunque puede resultar obvio, pero el contenido del tooltip tiene que estar directamente relacionado con el objetivo del link, o del mecanismo a utilizar, y tiene que dar una información que no sea evidente Por ejemplo, si tenemos un enlace tipo “google“, nunca pongamos en el tooltip “Click para ir a google”.
7. Asegurémonos que el tooltip llama suficientemente la atención, pero que no sea demasiado grande. Esté cerca del objetivo y no oculte otras áreas de la Web que sean importantes. Tampoco tiene que ocultar el accionador.
8. El tooltip debe desaparecer cuando el ratón sale del punto objetivo, NUNCA del tooltip.
9. Si el tooltip se carga dinámicamente, asegura todas las llamadas, y muestra todo el contenido de una sola vez. Esto también es común si contiene imágenes. Las conexiones lentas tendrán que esperar demasiado para verlo. Lo ideal es que sea texto plano, sin imágenes, y salvo que haya demasiados elementos en la página, no cargarlos dinámicamente.

Todo esto viene al último post de Smashing Magazine donde nos ponen más de 40 scripts de tooltips con javascript o CSS.