Muchas veces habréis pasado sobre una imagen y habréis visto que sale como un pequeño texto en amarillo con un texto, normalmente relacionado con la imagen. Pues bien, eso es lo que se conoce como tooltip.
Lo primero que vamos a hacer es poner una imagen en nuestra página web. Para ello utilizaremos la etiqueta IMG. Dentro de esta etiqueta tenemos el atributo src que nos indicará el nombre de la imagen que queremos mostrar.
Así nos quedará la siguiente línea de código:
<img src="foto.jpg">
Si queremos incluirle el tooltip, deberemos de utilizar el atributo title, al cual le daremos como valor el texto que queramos que salga en el tooltip. Veamos cómo queda la línea de código:
<img title="Foto de linea de codigo" src="foto.jpg">
Lo bueno del atributo title es que lo podemos utilizar en diferentes etiquetas HTML. Es decir, que no solo está limitado a la etiqueta IMG.
Y veamos el resultado, pasa sobre la imagen…
Veamos el comportamiento de algunos navegadores:
