CSS tooltips
Hace algún tiempo me encontré en la situación de tener que implementar tooltips en un proyecto Web. Luego de buscar y experimentar distintas soluciones (la mayoría basadas en librerías externas en jQuery), me fue posible notar la dificultad de implementación que tenían estas para alguien que no contaba con gran experiencia en jQuery, como era mi caso, por lo que la experiencia terminó siendo menos que satisfactoria.
Sin embargo, al seguir buscando, fue posible encontrar una forma mucho más sencilla de implementar estos tooltips, todo con la ayuda de nuestro querido y nunca bien ponderado CSS. Esta forma, se las contamos hoy mediante un sencillo y rápido tutorial.
El detalle, como siempre, después del salto.
Antes de comenzar, partamos por aclarar para quienes desconozcan el concepto:
¿Qué es un tooltip?
Un tooltip es básicamente un cuadro que podemos rellenar con distinta información, el cual será visto por un usuario cuando pose el puntero del mouse sobre un elemento en particular de un documento Web.
Su funcionamiento es bastante similar a los atributos ALT o TITLE de las imágenes, con la diferencia que el tooltip podemos adjuntarlo a otros elementos, como por ejemplo texto.
La gran utilidad de los tooltips es poder presentar a nuestros visitantes información extra sobre ciertos elementos o secciones del sitio. Por ejemplo, es posible combinarlos con un formulario para agregar datos o tips sobre como rellenar ciertos campos, o entregar advertencias sobre cierto tipo de información.
Con eso claro, continuemos:
En vista de que no utilizaremos librerías externas para crear nuestros tooltips, y solo lo haremos mediante CSS, lo que necesitamos es:
1.- Lo primero que haremos, será crear un nuevo documento HTML, el cual llamaremos prueba.html, pero pueden darle el nombre que deseen.
2.- En este documento que hemos creado, añadiremos un estilo de CSS, agregando el siguiente código entre las etiquetas <head> y </head>:
<style type=”text/css”>
a:hover{
background:#ffffff;
text-decoration:none;
}a.tooltip span{
display:none;
padding: 2px 3px;
margin-left: 8px;
width: 130px;
}a.tooltip:hover span{
display: inline;
position: absolute;
background: #ffffff;
border: 1px solid #cccccc;
color:#6c6c6c;
}</style>
Estos estilos determinarán el comportamiento cuando pasemos el mouse sobre un enlace, definiendo una clase llamada tooltip con la que deberemos marcar la etiqueta correspondiente en HTML. Aquí pueden jugar con los colores e ir probando las distintas características para lograr un resultado más personalizado si así lo desean.
3.- Luego, entre las etiquetas <body> y </body> simplemente definimos un texto y lo enlazamos, haciendo la llamada en el atributo class a tooltip, para que haga la relación con los estilos que recién hemos definido. Por ejemplo:
<body>
Este es un <a class=”tooltip” href=”#”>Ejemplo de tooltip<span>Muy sencillo y hecho en CSS</span></a>.
</body>
Ahora, de acuerdo a los estilos que definimos anteriormente, todo lo que incluyamos dentro de las etiquetas <span> y </span> es lo que aparecerá dentro del tooltip, independiente de que este todo dentro de una etiqueta <a>. Adicionalmente, recuerden que el atributo href dentro de la etiqueta <a> debe apuntar a #, para que no cargue otro vínculo.
4.- Guardamos y abrimos en el navegador, con lo que debiesemos tener algo como esto:
5.- Pasamos el mouse por encima del enlace y veremos lo siguiente:
Tal como lo habíamos definido. Debido a que es una captura de pantalla, no se aprecia el puntero del mouse, pero podemos ver como la línea inferior del enlace desapareció al pasar el mouse por encima, tal como definimos en nuestro estilo CSS y aparece dentro del tooltip el texto que incluímos entre las etiquetas <span> y </span>.
Bastante simple ¿no?. En tan solo un par de minutos hemos podido habilitar y añadir tooltips mediante CSS para utilizar en nuestros sitios Web. Esto es muy útil si lo vamos combinando con distintos elementos, todo con el fin de entregar una mejor experiencia a nuestros visitantes.
Antes de terminar, les recordamos que como siempre, este tutorial ha sido:
Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.
Esperamos que este tutorial haya sido de utilidad para Uds.
Muchas gracias por leer y será hasta una próxima oportunidad.
8:48:39 am
Hola a todos. A ver quién puede ayudarme. Soy un traductor que e-dita sus traducciones en la página antes mencionada, y uso tooltips para lo que, en edición en papel, serían las notas a pie de página: se pasa el ratón por la llamada y aparece el elemento con la explicación correspondiente. Pero la cosa tiene varias limitaciones, a las que quisiera poner remedio con vuestra ayuda. Para empezar, el tooltip aparece siempre en la misma posición, por lo que, a veces, desaparece por los bordes de la ventana, y solo es posible leer su contenido desplazándose con las flechas (se activan las scrollbars, creo que se llaman). Sin embargo, sé que hay tooltips que modifican su posición para ser siempre visibles íntegramente en la pantalla.
Otro problema, este más serio, es que el tooltip desaparece en cuando muevo el ratón de la llamada, y por tanto no puedo “entrar” con este dentro del tooltip, lo que sería muy aconsejable para poder incluir, por ejemplo, enlaces en los que pinchar.
Aquí os dejo el código y el body del tooltip:
En código:
a.info {
position:relative;
z-index:24;
color:#000;
text-decoration:none;
}
a.info:hover {
z-index:25;
}
a.info span {
display: none;
}
a.info:hover span {
display:block;
position:absolute;
top:2em;
left: 0cm;
border:1px solid #000000;
background-color:#FFFFFF;
color:#000000;
text-align:justify;
font-family: Times;
font-size: 14px;
padding: 10px;
}
En body:
<a href=”#” class=”info” onclick=”return false”>°<span style=”width:220px”>Texto del tooltip.</span></a>
Como veis, la anchura no la defino en el código, sino en el <span style> del body, para ajustar en cada caso el tamaño de la nota.
En fin, ¿qué me decís?
11:04:13 am
Hola, me ayudás? no me sale. Copié todo tal cuál está perooo.. naada
12:43:11 pm
hola muy buen sitio me sirvió mucho tu nota acerca del favicon de hay cree el mio muchas gracias.