Tooltips en HTML

28 septiembre 2010 in HTML, Trucos | Tags: title, tooltip

Los tooltips son estás pequeñas etiquetas emergentes que se muestran cuando el cursor del ratón queda parado durante unos instantes encima de un componente visual de una ventana. Son muy prácticos para suministrar una información adicional relacionada a este componente.

En HTML es fácil crear un tooltip con el atributo title. El atributo title es válido para todos los elementos de HTML, por lo cual se puede poner un tooltip a absolutamente todo. Con el elemento SPAN es incluso posible añadir un tooltip a un texto sin más.

Por ejemplo, el código de HTML


Soy una <SPAN title="Soy un tooltip">prueba de tooltip</SPAN>.

aparece en el navegador como en la imagen.

La etiqueta con la frase “Soy un tooltip” emergió porque, durante unos instantes, dejé el cursor parado encima del contenido del elemento SPAN, la expresión “prueba de tooltip”.

Mediante hojas de estilo puedo crear un tooltip más sofisticado que aprovecha la característica hover del elemento A. Cómo sólo este elemento tiene esta característica, debo incluir cualquier objeto con este tipo de tooltip en un elemento A.


Soy otra <A class="mi_hover">prueba de tooltip</A>.

Lógicamente debo definir la clase de estilo mi_hover de forma apropiada. Como se puede observar, el elemento A no tiene el atributo href, por lo cual no es un enlace.

Una tercera manera de crear tooltips es mediante los eventos OnMouseOver y OnMouseOut. Estos eventos pueden llamar a funciones de Javascript que pueden hacer aparecer de todo. Es la forma más compleja de hacer un tooltip pero también la más completa.

Referencias

El atributo title
La clase de estilo dinámica hover
Eventos intrínsicos de elementos HTML

Archivos

septiembre 2010
L	M	X	J	V	S	D
	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

14 comentarios

Comments feed for this article

30 septiembre 2010 a 18:12

paulina

Hola
Me llamo Paulina soy administradora de un directorio web/blog. Me ha gustado mucho tu blog de informatica, busco intercambiar enlaces. Por ello, me encantaría contar con tu sitio en mi directorio, consiguiendo que mis visitantes entren también en tu web.
Si estás de acuerdo, házmelo saber al mail: paulina.cortez@hotmail.cl
Suerte con tu web! 🙂
Pau

Responder

2 octubre 2010 a 23:31

trucosinformaticos

Muchas gracias por tu interés en mi blog. Me parece bien que pones un enlace a mi blog en tu página siempre y cuando queda claro que es un acceso a mi contenido y no al tuyo. No he entendido muy bien por qué hablas de «intercambiar» enclaces, ya que no hay un sitio a enlacar en tu mensaje. En todo caso, sólo quiero poner enlaces en mi blog que encajan al mio por su contenido.

Responder

25 octubre 2010 a 13:35

Juan

Hola.Quisiera saber como poner varios tooltips en una sola imagen.Me explico:tengo una imagen que tiene varias joyas;y a cada joya le quiero poner un precio utilizando un tooltip.Como se hace eso?

Responder

25 octubre 2010 a 20:48

trucosinformaticos

Ninguna de las maneras que describo permite generar más que un tool-tip por elemento HTML, ya que los tool-tips se basan en atributos del elemento. Un atributo no puede ser usado más que una vez en cada elemento. Una imagen es un elemento IMG. nada más que un elemento, sólo permite un tool-tip. (Como mucho podrías mostrar tool-tips de diferentes tipos a la vez, como uno basado en el atributo title y otro generado por CSS, pero esto todavía no resuelve el problema de mostrar diferente tool-tips por zona.)

Sin embargo, puede haber tres estrategias para resolver tu problema:

Corta la imagen en varias piezas y únelas visiblemente mediante una tabla. Cada pieza sería un elemento IMG a que podrías añadir un tool-tip diferente. En un caso simple cortas la imagen en dos partes y tendrías algo así:
```
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="imagen_parte_1" title="Mi tool-tip"></td>
<td><img src="imagen_parte_2" title="Mi otro tool-tip"></td>
</tr>
</table>
```
Esta es la manera más simple y la más adecuada para pocas imágenes que no sean dinámicas. Es importante poner los atributos cellspacing, cellpadding y border ya que eliminan los espacios entre las celdas de la tabla. (Esto se puede conseguir también mediante hojas de estilo).
Otra forma es creando un elemento MAP que normalmente se usa para enlazar diferentes URL a un sólo objeto/imagen. Las enlaces son elementos A a que se podría añadir el atributo title. Ver la documentación del elemento. Viene con algunos ejemplos.
Una última manera sería captar la posición del ratón con Javascript. En este caso deberías escribir una rutina que calcula el tool-tip según las coordenadas del ratón. Esto sería una solución para muchos tool-tips en un sólo objeto. Hay ejemplos como este para obtener las coordenadas del ratón.

Responder

22 octubre 2011 a 03:18

Daniel Carrero

Muchas gracias era justo lo que buscaba.

Responder

23 octubre 2011 a 21:34

trucosinformaticos

De nada. Me alegro haberte ayudado.

Responder

4 julio 2013 a 16:44

Patriciaa

Muchas gracias!! un gran aporte.

Responder

5 julio 2013 a 18:53

trucosinformaticos

Gracias a ti por escribirlo.

Responder

10 agosto 2013 a 19:26

Sailor Condezo Tascca

hola , estopy haciendo un powwr point con el power point 2011 y quisiera saber si se puede hacer esto ahi o si hay alguna otra manera. gracias

Responder

11 agosto 2013 a 19:06

trucosinformaticos

Yo no conozco ninguna manera en PowerPoint para hacer un tooltip. Tampoco encaja con la filosofía de PowerPoint. Un tooltip es una ayuda rápida cuando se interactúa con una interfaz gráfica. Un presentación PowerPoint normalmente no es interactiva. Es más como un programa de televisión donde tampoco estás explorando diferentes partes de la imagen sino ves lo que hay.

Quizá se puede hacer algún truco. Si puedes captar eventos en PowerPoint como «mouse enter» y «mouse leave», podrías hacer visible (e invisible) un campo de texto que serviría de tooltip entonces. Yo sé que PowerPoint también permite presentaciones interactivos, pero nunca lo probé.

Responder

2 octubre 2013 a 13:10

Adrian