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…
Veámos el comportamiento de algunos navegadores:
Claudia
Cómo hago en este código si requiero que el atributo title tenga un ancho especifico:
–
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.
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
Cristian, nos ponemos manos a la obra. A ver si podemos sacar algún artículo.
Saludos.
Gonzalo
Muy util, gracias
Víctor Cuervo
@Gonzalo, Me alegro que te haya servido. 😀
victor
Esta buena, pero como lo hago si yo quiero mostrar varias lineas
dentro de mi tooltip, como escribo el title??
Felipe
Muchas Gracias me salvaste en el momento oprtuno..;)
jose
Como puedo hacer multilínea el tip?
rasputin
Alguna Idea para Java ?. Si alguno sabe, lo necesito para en una coordenada especifica. Gracias :P
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.
camilo londoño
como hago para montarlo en dreamweare
porfavor respondamen
Max Trebor
Muy buen tip, me funcionó en un tag de .net:
La función Recupera_imagen = «»
GV
Gracias por tener esta ayuda
ponsho
lo hago para DreamWeaver en un archivo Html y no me funciona… que estare haciendo mal.?
Gracias