Tooltip zum Bild

131

Ich benutze den Tooltip. Aber ich möchte das auf Bild-Tag, wie wenn ich mit der Maus über das Bild fahre, dann sollte der Tooltip funktionieren. Ich habe versucht, aber nicht für mich am Image-Tag zu arbeiten.

html image tooltip user1528786
quelle
Welche Sprache? HTML, C #, Java, ...?
Matthias
4
Verwenden Sie document.getElementById('theImage').title='tooltip text'.
Jay
stackoverflow.com/questions/36275678/how-to-create-a-tooltip
Pooja Kedar
Das Problem ist, dass sich das <img> -Tag selbst schließt, sodass Sie kein weiteres Element hinzufügen können.
Justin

Antworten:

351

Sie können hierfür das Standard-HTML-Titelattribut des Bildes verwenden:

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

Ich habe Tooltips für mein Arbeitsprojekt festgelegt, das zu 100% funktioniert

<!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>
Erweitern Sie das Snippet

Paresh Shiyal
quelle
0

Mit Javascript können Sie QuickInfos für alle Bilder auf der Seite festlegen.

<!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>
Erweitern Sie das Snippet

Sushma Reddy
quelle
-6

Sie können das folgende Format verwenden, um einen Tooltip für ein Bild zu generieren. 

<div class="tooltip"><img src="joe.jpg" />
  <span class="tooltiptext">Tooltip text</span>
</div>
Hasshi Sudler
quelle
3
Sie vermissen etwas CSS, damit dies tatsächlich funktioniert. Wenn Sie eine Klasse für .tooltip: hover .tooltiptext hinzufügen und .tooltiptext richtig positionieren, ist dies möglicherweise eine gute Möglichkeit, einen Tooltip anzuzeigen, bei dem Sie mehr Kontrolle über seine Darstellung haben.
LKM
Sie basieren wahrscheinlich auf w3-Schulen: w3schools.com/css/css_tooltip.asp Ich bin damit einverstanden, dass es sich um eine unvollständige Lösung handelt, die nur einen Link für diejenigen bereitstellt, die diesen Weg gehen möchten.
Justin