Tooltip, texto al pasar sobre una imágen

18/Nov/2006 HTML , 15 Comentarios

Muchas veces habréis pasado sobe 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 imágen 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:

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 como queda la línea de código:

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 imágen…

Foto de Línea de Código

Veámos el comportamiento de algunos navegadores:

Title en los navegadores

Vídeos sobre HTML


15 comentarios en “Tooltip, texto al pasar sobre una imágen”

Víctor Cuervo

Claudia

Cómo hago en este código si requiero que el atributo title tenga un ancho especifico:

Víctor Cuervo

Víctor Cuervo

Claudia, a los tooltip no les puedes dar ancho. Lo que puedes hacer es utilizar una librería que te ayude a simular un tooltip.
Por ejemplo puedes utilizar https://popper.js.org/

Espero te sirva. Un saludo.

Víctor Cuervo

Cristian Maine

Me gustaria que comentes algo sobre como personalizar justamente los titles de las imagenes, o cualquier otro tooltips, mas de imagenes que no lo puedo hacer gracias!

Víctor Cuervo

Víctor Cuervo

Cristian, nos ponemos manos a la obra. A ver si podemos sacar algún artículo.

Saludos.

Víctor Cuervo

Gonzalo

Muy util, gracias

Víctor Cuervo

Víctor Cuervo

@Gonzalo, Me alegro que te haya servido. 😀

Víctor Cuervo

victor

Esta buena, pero como lo hago si yo quiero mostrar varias lineas
dentro de mi tooltip, como escribo el title??

Víctor Cuervo

Felipe

Muchas Gracias me salvaste en el momento oprtuno..;)

Víctor Cuervo

jose

Como puedo hacer multilínea el tip?

Víctor Cuervo

rasputin

Alguna Idea para Java ?. Si alguno sabe, lo necesito para en una coordenada especifica. Gracias :P

Víctor Cuervo

lineadecodigo

@Camilo, en DreamWeaver debería ser tan sencillo como incluir una imagen y ponerle el valor al campo alt o title. Si no, otra opción es ver el código HTML y rellenarlo directamente como explica el ejemplo.

Víctor Cuervo

camilo londoño

como hago para montarlo en dreamweare
porfavor respondamen

Víctor Cuervo

Max Trebor

Muy buen tip, me funcionó en un tag de .net:

La función Recupera_imagen = «»

Víctor Cuervo

GV

Gracias por tener esta ayuda

Víctor Cuervo

ponsho

lo hago para DreamWeaver en un archivo Html y no me funciona… que estare haciendo mal.?
Gracias

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*