Programando o Intentándolo

Crear tooltips usando CSS

Los tooltips son esos cuadraditos de texto que aparecen al dejar el ratón sobre algún elemento ya sea de una pagina web o de cualquier programa y dan alguna información de que es o de como usarlo.

En HTML se pueden crear estos mensajes usando el atributo title y poniéndole el texto que se quiera, en la palabra tooltip en negrita puedes ver el ejemplo del uso de este atributo.

Así de sencillo es pero el aspecto tampoco es que sea muy bueno y es probable que no quede bien con el estilo de tu web o que quieras introducir un enlace, una imagen o cualquier elemento en el tooltip y esto con el atributo title no se puede hacer. Vamos a ver lo se sencillo que es hacerlo usando solo CSS (Aquí puedes ver como hacerlo usando javaScript para generar el tooltip y hacerlo más “sencillo”).

El código HMTL necesario es el siguiente:

Simplemente hace falta una etiqueta en la que se puedan meter otras dentro (div, span, p, a o la que tu quieras) y dentro de esta introducimos otra como por ejemplo span y dentro de esta el texto que ira en el tooltip. Tanto lo que se muestra como el que será el texto del tooltip puede ser cualquier etiqueta o conjunto de etiquetas.

El estilo pues como es de suponer cada uno pondrá lo que le parezca aunque para ver lo que se puede hacer creo que este esta bastante bien.

Aunque las hojas de estilo ya de por si son fáciles de entender y además esta comentada para que se vea más claro, por si acaso comento que la clase cssTooltip tiene que tener posición relativa ya que el tooltip (.cssToolTip span) se debe posicionar de forma absoluta para que aparezca en otro nivel y no descoloque el resto de la pagina y si cssTooltip no tuviese posición relativa la posición del tooltip seria con respecto a la ventana del navegador.

También hay que tener cuidado de que el tooltip este por defecto oculto y que solo se muestre cuando se pone el raton encima del elemento en cuestión. No se podría usar ni opacity ni visibility porque aunque el tooltip este posicionado de forma absoluta y aparentemente de igual que ocupe espacio o no lo ocupe con tal de que no se vea no es cierto pues si debajo del tooltip quedase un botón, un enlace u otro tooltip por ejemplo no lo prodríamos usar ya que el tooltip lo bloquearia al estar por encima de el aun en el caso de que no se estuviese mostrando (visility:hidden; u opacity:0;).

Dos ejemplos para que veas como queda, aunque puedes darle el estilo que se te ocurra cambiando el CSS.

Lo que se muestra
Este es el texto del tooltip

bla,bla, bla,


En el tooltip puede haber enlaces, un enlace, inputs o lo que tu quieras.

bla,bla, bla.

El código del primer ejemplo es el más arriba y el del segundo es este:

Si te fijas en el primero de los dos ejemplos como el elemento contenedor es un div (un elemento de bloque) si pones el ratón en cualquier parte de esa línea se muestra el tooltip y si limitas el ancho del elemento o usan un elemento en línea como en el segundo ejemplo y quieres que se muestre más ancho tienes establecer el ancho que quieras que tenga (En la versión de esto usando javaScript, no hay estos problemas porque hay cosas que se pueden hacer de otras formas, aquí puedes ver como lo he hecho).