Hay muchas maneras de crear un Tooltip personalizado con CSS dependiendo de que tipo de Tooltip queramos, en este artículo mostrare dos formas.
- Mostrando una imagen, texto, URL
Esto es un ejemplo Texto que aparece !
Detalle del código anterior :
- La línea 1 es necesaria para que funcione en todas las etiquetas el selector hover en IE7.
- En la línea 26 se pone el texto que va aparecer y desaparecer.
- En la línea 25 está el texto en donde tenemos que pasar el cursor para que aparezca el tooltip.
- De la línea 9 a 11 indica que el texto que aparecerá y desaparecerá comenzará como invisible("display:none").
- De la línea 13 a 21 indica que cuando pongamos el cursor sobre el texto indicado en la línea 25 el tooltip aparecerá("display:block") y cuando la quitemos desaparecerá.
- la línea 15 indica que el elemento debe ser de posición absoluta con respecto al "span" de la línea 24.
- En la línea 26 también se pudo poner en vez de una etiqueta "span" una etiqueta img con la imagen que queramos("<img src='miImagen.jpg' />") , claro que deberíamos cambiar el valor de top y left de la línea 16 y 17 para acomodar bien la imagen donde queramos y también la línea 13 cambiandolo a " .franz:hover img " .
-Mostrando una imagen con un texto interno
Ejemplo:
Demostración:Franz Tooltip ¡Hola que tal!
Es lo que necesitaba gracias
ResponderEliminarMuy bueno, gracias.
ResponderEliminar