Image Tool tips in SharePoint using jQuery

Here is my requirement: when I mouse over an image, I should get a tool tip with screenshot for easy usage.

Here is how I’ve done this using J-Query:

Download the jQuery files and upload them into a document library, from here:

Paste the below code inside the <asp:Content> </asp:Content> (you can find this tag, at the end of the page)

<link rel="stylesheet" href="Support/jquery.tooltip.css" />
<link rel="stylesheet" href="Support/screen.css" />
<script src="Support/jquery.js" type="text/javascript"></script>
<script src="Support/jquery.dimensions.js" type="text/javascript"></script>
<script src="Support/jquery.tooltip.js" type="text/javascript"></script>
<script type="text/javascript">

$(function() {
$('#ctl00_PlaceHolderMain_tonus').tooltip({
delay: 0,
showURL: false,
bodyHandler: function() {
return $("<img/>").attr("src", 'https://teamsites.Crescent.com/sites/FTPR/PMD/Support/instructions.gif');
}
});
});
</script>
jQuery Image Tool tip in SharePoint

Salaudeen Rajack

Salaudeen Rajack - Information Technology Expert with Two-decades of hands-on experience, specializing in SharePoint, PowerShell, Microsoft 365, and related products. He has held various positions including SharePoint Architect, Administrator, Developer and consultant, has helped many organizations to implement and optimize SharePoint solutions. Known for his deep technical expertise, He's passionate about sharing the knowledge and insights to help others, through the real-world articles!

Leave a Reply

Your email address will not be published. Required fields are marked *