In this post, I’ll try to show how you can implement tooltips with dynamic content for any link in SharePoint pages.
Ingredients
- jquery.1.4.3.min.js
- jquery.simpletip-1.3.1.min.js
- jquery.SPServices-0.5.7.min.js
- 1 teaspoon custom tooltip style
- 1 CEWP
Preparation
Add jQuery references
Firstly, add a CEWP to your site home page. Then edit your CEWP in Source Editor and add the following references with low heat.
<script type=”text/javascript” language=”javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”></script>
<script language=”javascript” type=”text/javascript” src=”Shared%20Documents/jquery.SPServices-0.5.7.min.js”></script>
<script type=”text/javascript” language=”javascript” src=”Shared%20Documents/jquery.simpletip-1.3.1.min.js”></script>
Add jQuery libraries
While references are getting warmer, add below files in your Shared Documents pot.
jquery.1.4.3.min.js
http://code.google.com/apis/libraries/devguide.html#jquery
jquery.simpletip-1.3.1.min.js
http://craigsworks.com/projects/simpletip/
jquery.SPServices-0.5.7.min.js
http://spservices.codeplex.com/
Get code structure ready
Secondly, add your javascript code skeleton to your CEWP.
<script type=”text/javascript”>
$(document).ready(function() {
// Code goes here
}); // end – document ready
</script>
Ok, so far our preparation is done. Now we can start cooking our meal.
Call SharePoint Web Services using jQuery
Since I chose ‘list permissions’ as for our dynamic content flavor for our tooltip, first we need to call GetPermissionCollection method of permissions.asmx web service. For a given list, this call will return us all the taste we are used to getting from a list permissions page such as the one below.
Call permissions web service
Add following code to your document.ready pot.
// Call permissions web service
$().SPServices({
url: “/_vti_bin/permissions.asmx”,
operation: “GetPermissionCollection”,
async: false,
objectName: “Tasks”,
objectType: “List”,
completefunc: function (xData, Status) {
// Format your output here
} // end – completefunc
}); // end – SPServices
Once web service is successfully invoked, the result will be returned in xData. Then, in completefunc method, you can modify, format, display your result as you wish.
In this case, I choose to feed my tooltip with the result of my web service call. This will allow me to show list permissions, once user hovers mouse over a list in quick launch menu.
Select fields you want to display
But before I do so, I need to select which part of result I need to show in my tooltip. Here, I choose to show only users and groups which have permissions on that list.
Add following code to your completefunc pot.
// Loop thru each permission
// Display users and groups
//$(xData.responseXML).find(“Permission”).each(function() {
$(xData.responseXML).find(“Permission”).each(function() {
var xmlGroupName = $(this).attr(“GroupName”);
var strGroupName = String(xmlGroupName);
var xmlUserLogin = $(this).attr(“UserLogin”);
var strUserLogin = String(xmlUserLogin );
if (strGroupName != ‘undefined’)
$(“#callResponse”).append(“<li>” + strGroupName + “</li>”);
else
$(“#callResponse”).append(“<li>” + strUserLogin + “</li>”);
});
In above code you’ll see that group and user names are appended to a div element, whose id is callResponse. So, let’s add that div too in our CEWP. You can put anywhere outside of <script> tags.
Add Tooltip to SharePoint links
We are done with heavy lifting, now it is show-off time. Our meal has been cooked to perfection and ready to be served now. One last thing to do: get tooltip plate ready.
I chose Tasks link in quick launch menu as my victim. I’ll add my tooltip to Tasks link so that when users mouse over that link, they’ll see my delicious list permissions content in a beautifully served tooltip plate.
Add following code after the end of SPServices line.
// Tooltip
$(‘a[href*="Tasks"]‘).simpletip({
content: $(“#callResponse”),
offset: [50, 0]
}); // end – Tooltip
Add Tooltip Style
Finally, before we get our plate in hand and walk out of kitchen door, a final touch-up is required to wow our guests. That one is our humble inline style below. Of course if you wish, you can put that style in your some css files later on.
<STYLE>
.tooltip{
position: absolute;
width: 250px;
padding: 8px 10px;
background-color: #F2F2F2;
border: 2px solid #848484;
cursor: pointer;
text-decoration:none;
}
</STYLE>
Conclusion
Now you walk out of SharePoint development kitchen door and put your masterpiece in front of your guests and enjoy watching them when they are eating.
Bon Appetit!!!
zieglers
