Friday, July 9, 2010

Image Tool tips in SharePoint using JQuery

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

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


download the jquery files and upload into a document library, from here:
http://plugins.jquery.com/files/dimensions-1.1.2.zip
http://jquery-very-simple-tooltip.googlecode.com/files/jquery.tooltip_v3.2.2.zip
http://blog.jquery.com/2011/09/01/jquery-1-6-3-released/
optional: http://jquery.bassistance.de/tooltip/demo/screen.css

jQuery Image Tool tip in SharePoint

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>



You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.
*Sponsored


Check out these SharePoint products:

No comments :

Post a Comment

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...