Descrizione comando sull'immagine


132

Sto usando il tooltip. Ma lo voglio sul tag immagine, come quando passo il mouse sull'immagine, la descrizione comando dovrebbe funzionare. Ho provato ma non ho funzionato per me sul tag immagine.


Quale lingua? HTML, C #, Java, ...?
Matthias,

4
Usa document.getElementById('theImage').title='tooltip text'.
Jay,


Il problema è che il tag <img> si chiude automaticamente, quindi non è possibile aggiungere un altro elemento al suo interno.
Justin

Risposte:


352

È possibile utilizzare l'attributo del titolo HTML standard dell'immagine per questo:

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

3

Ho impostato tooltip sul mio progetto di lavoro che funziona 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>


0

Usando JavaScript, puoi impostare i suggerimenti per tutte le immagini sulla pagina.

<!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>


-6

È possibile utilizzare il formato seguente per generare una descrizione comandi per un'immagine.

<div class="tooltip"><img src="joe.jpg" />
  <span class="tooltiptext">Tooltip text</span>
</div>

3
Ti manca qualche CSS per farlo funzionare davvero. Se aggiungi una classe per .tooltip: passa il mouse su .tooltiptext e posizioni correttamente .tooltiptext, questo potrebbe essere un ottimo modo per mostrare una descrizione dei comandi in cui hai più controllo sulla sua presentazione.
LKM

Probabilmente si stanno basando su scuole w3: w3schools.com/css/css_tooltip.asp Sono d'accordo che sia una soluzione incompleta, fornendo solo il link per coloro che vogliono seguire questa strada.
Justin
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.