You can use the standard HTML title attribute of image for this:
<img src="source of image" alt="alternative text" title="this will be displayed as a tooltip"/>
You can use the following format to generate a tooltip for an image.
<div class="tooltip"><img src="joe.jpg" />
<span class="tooltiptext">Tooltip text</span>
</div>
I am set Tooltips On My Working Project That Is 100% Working
<!DOCTYPE html>_x000D_
<html>_x000D_
<style>_x000D_
.tooltip {_x000D_
position: relative;_x000D_
display: inline-block;_x000D_
border-bottom: 1px dotted black;_x000D_
}_x000D_
_x000D_
.tooltip .tooltiptext {_x000D_
visibility: hidden;_x000D_
width: 120px;_x000D_
background-color: black;_x000D_
color: #fff;_x000D_
text-align: center;_x000D_
border-radius: 6px;_x000D_
padding: 5px 0;_x000D_
_x000D_
/* Position the tooltip */_x000D_
position: absolute;_x000D_
z-index: 1;_x000D_
}_x000D_
_x000D_
.tooltip:hover .tooltiptext {_x000D_
visibility: visible;_x000D_
}_x000D_
.size_of_img{_x000D_
width:90px}_x000D_
</style>_x000D_
_x000D_
<body style="text-align:center;">_x000D_
_x000D_
<p>Move the mouse over the text below:</p>_x000D_
_x000D_
<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>_x000D_
_x000D_
<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>_x000D_
_x000D_
</body>_x000D_
</html>Using javascript, you can set tooltips for all the images on the page.
<!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>Source: Stackoverflow.com