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", 'http://teamsites.Crescent.com/sites/FTPR/PMD/Support/instructions.gif');
}
});
});
</script>
jQuery Image Tool tip in SharePoint

Salaudeen Rajack

Salaudeen Rajack is a SharePoint Architect with Two decades of SharePoint Experience. He loves sharing his knowledge and experiences with the SharePoint community, through his real-world articles!

Leave a Reply