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.

html image tooltip

— user1528786
fonte

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

— Matthias,

4

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

— Jay,

stackoverflow.com/questions/36275678/how-to-create-a-tooltip

— Pooja Kedar

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

— Justin

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"/>

— Matthias
fonte

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>

Espandi frammento

— Paresh Shiyal
fonte

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>

Espandi frammento

— Sushma Reddy
fonte

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

— Hasshi Sudler
fonte

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