Información sobre herramientas en la imagen

132

Estoy usando la información sobre herramientas. Pero quiero eso en la etiqueta de la imagen, como cuando pasé el mouse sobre la imagen y la información sobre herramientas debería funcionar. He intentado pero no funciona para mí en la etiqueta de imagen.

html image tooltip usuario1528786
fuente
¿Que lenguaje? HTML, C #, Java, ...?
Matthias
44
Uso document.getElementById('theImage').title='tooltip text'.
Jay
stackoverflow.com/questions/36275678/how-to-create-a-tooltip
Pooja Kedar
El problema es que la etiqueta <img> se cierra automáticamente, por lo que no puede agregar otro elemento dentro de ella.
Justin

Respuestas:

352

Puede usar el atributo estándar de título HTML de la imagen para esto:

<img src="source of image" alt="alternative text" title="this will be displayed as a tooltip"/>
Matías
fuente
3

Estoy configurado Tooltips en mi proyecto de trabajo que funciona al 100%

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.size_of_img{
width:90px}
</style>

<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip"><img class="size_of_img" src="https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg" alt="Image 1" /><span class="tooltiptext">grewon.pdf</span></div>

<p>Note that the position of the tooltip text isn't very good. Check More Position <a href="https://www.w3schools.com/css/css_tooltip.asp">GO</a></p>

</body>
</html>
Expandir fragmento

Paresh Shiyal
fuente
0

Con javascript, puede establecer información sobre herramientas para todas las imágenes de la página.

<!DOCTYPE html>
<html>
    <body>
    <img src="http://sushmareddy.byethost7.com/dist/img/buffet.png" alt="Food">
    <img src="http://sushmareddy.byethost7.com/dist/img/uthappizza.png" alt="Pizza">
     <script>
     //image objects
     var imageEls = document.getElementsByTagName("img");
     //Iterating
     for(var i=0;i<imageEls.length;i++){
        imageEls[i].title=imageEls[i].alt;
        //OR
        //imageEls[i].title="Title of your choice";
     }
        </script>
    </body>
</html>
Expandir fragmento

Sushma Reddy
fuente
-6

Puede usar el siguiente formato para generar una información sobre herramientas para una imagen. 

<div class="tooltip"><img src="joe.jpg" />
  <span class="tooltiptext">Tooltip text</span>
</div>
Hasshi Sudler
fuente
3
Te estás perdiendo algo de CSS para que esto realmente funcione. Si agrega una clase para .tooltip: coloque el cursor sobre .tooltiptext y coloque .tooltiptext correctamente, esta podría ser una buena manera de mostrar información sobre herramientas en la que tenga más control sobre su presentación.
LKM
Probablemente se están basando en las escuelas w3: w3schools.com/css/css_tooltip.asp. Estoy de acuerdo en que es una solución incompleta, solo proporciona un enlace para aquellos que desean seguir esta ruta.
Justin