Ik gebruik de knopinfo. Maar ik wil dat op de afbeeldingstag, zoals wanneer ik met de muis over de afbeelding ga, dan zou de tooltip moeten werken. Ik heb het geprobeerd, maar het werkt niet voor mij op de afbeeldingstag.
Antwoord 1, autoriteit 100%
U kunt hiervoor het standaard HTML-titelattribuut van afbeelding gebruiken:
<img src="source of image" alt="alternative text" title="this will be displayed as a tooltip"/>
Antwoord 2, autoriteit 2%
Ik ben ingesteld op Tooltips voor mijn werkproject dat 100% werkt
<!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>Antwoord 3
Met javascript kunt u knopinfo instellen voor alle afbeeldingen op de pagina.
<!DOCTYPE html>
<html>
<body>
<img src="https://sushmareddy.byethost7.com/dist/img/buffet.png" alt="Food">
<img src="https://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>Antwoord 4
U kunt de volgende indeling gebruiken om knopinfo voor een afbeelding te genereren.
<div class="tooltip"><img src="joe.jpg" />
<span class="tooltiptext">Tooltip text</span>
</div>