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

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