Etykietka na obrazie

132

Używam podpowiedzi. Ale chcę, aby na tagu obrazu, na przykład gdy najeżdżam kursorem myszy na obraz, etykietka powinna działać. Próbowałem, ale nie działa dla mnie na tagu obrazu.

html image tooltip user1528786
źródło
Jaki język? HTML, C #, Java, ...?
Matthias
4
Użyj document.getElementById('theImage').title='tooltip text'.
Jay
stackoverflow.com/questions/36275678/how-to-create-a-tooltip
Pooja Kedar
Problem polega na tym, że tag <img> zamyka się samoczynnie, więc nie możesz dodać do niego kolejnego elementu.
Justin

Odpowiedzi:

351

Możesz użyć do tego standardowego atrybutu tytułu HTML obrazu:

<img src="source of image" alt="alternative text" title="this will be displayed as a tooltip"/>
Matthias
źródło
3

Ustawiłem podpowiedzi dotyczące mojego projektu roboczego, który działa w 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>
Rozwiń fragment

Paresh Shiyal
źródło
0

Używając javascript, możesz ustawić podpowiedzi dla wszystkich obrazów na stronie.

<!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>
Rozwiń fragment

Sushma Reddy
źródło
-6

Możesz użyć następującego formatu, aby wygenerować podpowiedź dla obrazu. 

<div class="tooltip"><img src="joe.jpg" />
  <span class="tooltiptext">Tooltip text</span>
</div>
Hasshi Sudler
źródło
3
Brakuje Ci trochę CSS, aby to faktycznie działało. Jeśli dodasz klasę dla .tooltip: najedziesz kursorem .tooltiptext i umieścisz odpowiednio .tooltiptext, może to być dobry sposób na wyświetlenie podpowiedzi, w której masz większą kontrolę nad jej prezentacją.
LKM
Prawdopodobnie bazują na szkołach w3: w3schools.com/css/css_tooltip.asp Zgadzam się, że to niekompletne rozwiązanie, po prostu podając link dla tych, którzy chcą iść tą drogą.
Justin