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:
- https://plugins.jquery.com/files/dimensions-1.1.2.zip
- https://jquery-very-simple-tooltip.googlecode.com/files/jquery.tooltip_v3.2.2.zip (Update: Looks this link is unavailable! Use: https://www.jqueryscript.net/tooltip/Easy-Tooltip-Image-Preview-Plugin-with-jQuery.html)
- https://blog.jquery.com/2011/09/01/jquery-1-6-3-released/
- optional: https://jquery.bassistance.de/tooltip/demo/screen.css
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>
