Index: lams_central/web/includes/javascript/portrait.js
===================================================================
diff -u -r16a3de6463b235e8b8f91ebada6aac7db8172436 -r60d9a173d5590295376322fc3e857ae2dca37717
--- lams_central/web/includes/javascript/portrait.js	(.../portrait.js)	(revision 16a3de6463b235e8b8f91ebada6aac7db8172436)
+++ lams_central/web/includes/javascript/portrait.js	(.../portrait.js)	(revision 60d9a173d5590295376322fc3e857ae2dca37717)
@@ -20,21 +20,64 @@
    STYLE_LARGE = 'large',
    STYLE_XLARGE = 'xlarge';
 
+// Add a portrait to an existing div as specified by selector
 function addPortrait( selector, portraitId, userId, size, round, LAMS_URL ) {
     var isRound = round == null ? true : round;
     if ( portraitId  && portraitId > 0) {
-    		selector.css('background-image', 'url(' + LAMS_URL + 'download?preferDownload=false&uuid=' + portraitId + getSizeVersion(size) + ')');
-    		selector.addClass(getSizeCSS(size));
+    		selector.css('background-image', 'url(' + LAMS_URL + 'download?preferDownload=false&uuid=' + portraitId + _getSizeVersion(size) + ')');
+    		selector.addClass(_getSizeCSS(size));
     		if ( isRound ) {
 	    		selector.addClass(CSS_ROUND);
     		}
     } else {
-    		selector.addClass(getGenericSizeClass( size ));
-    		selector.addClass(PORTRAIT_VERSION_SUFFIX + userId % NUM_COLORS );
+    		selector.addClass(_getGenericSizeClass( size ));
+    		selector.addClass(getPortraitColourClass(userId));
     }
 }
 
-function getSizeCSS(size) {
+// Get the colour that would be used for the generic portrait. Useful when you need a consistent colour for a user. 
+function getPortraitColourClass(userId) {
+	return PORTRAIT_VERSION_SUFFIX + userId % NUM_COLORS;
+}
+
+// Create a popover/tooltip to display the learner's portrait. Put it in bind('pagerInitialized pagerComplete', function(event, options){})
+// (tablesorter) or within loadComplete (jqgrid). Elements to be processed should have class new-popover and dataset values for 'portrait' 
+// and 'fullname'. Use with definePortraitPopover. Size is optional. 
+function initializePortraitPopover(LAMS_URL, size) {
+	if ( ! size ) 
+		size = STYLE_LARGE;
+	
+	$('.new-popover').each(function( index, element ) {
+		var idString = element.dataset.id;
+		var url = LAMS_URL + '/download?preferDownload=false&uuid='+element.dataset.portrait+_getSizeVersion(size);
+			$(element).popover({
+				content: '<img src="'+url+'"/>',  
+				html: true,
+		        trigger: 'hover focus',
+		        title: element.dataset.fullname,
+		        container: 'body' // ensures popovers are not clipped within jqgrid tables
+		});
+			element.classList.remove('new-popover');
+	});
+	}
+
+
+// Define the element to have a popover/tooltip to display the learner's portrait. Call in the ajaxProcessing (tablesorter) or 
+// in a formatter function (jqgrid). Use with initializePortraitPopover. Displays the fullName and portrait in the popover when the 
+// user hovers on linkText. Usually linkText === fullName
+function definePortraitPopover(portraitId, userId, fullName, linkText) {
+	if ( ! linkText )
+		linkText = fullName;
+	
+	if ( portraitId ) {
+		return '<a tabindex="0" class="popover-link new-popover" role="button" data-toggle="popover" data-id="popover-'+userId
+			+'" data-portrait="'+portraitId+'" data-fullname="'+fullName+'">'+linkText+'</a>';
+	} else {
+		return linkText;
+	}
+}
+
+function _getSizeCSS(size) {
     	if ( size ) {
     	    if (size == STYLE_MEDIUM)
 	    	    	return CSS_MEDIUM;
@@ -46,7 +89,7 @@
     	return CSS_SMALL;
 }
 
-function getSizeVersion(size) {
+function _getSizeVersion(size) {
     	if ( size ) {
     	    if (size == STYLE_MEDIUM)
 	    	    	return VERSION_MEDIUM;
@@ -58,7 +101,7 @@
     	return VERSION_SMALL;
 }
 
-function getGenericSizeClass(size) {
+function _getGenericSizeClass(size) {
   	if ( size ) {
     	    if (size == STYLE_MEDIUM)
 	    	    	return CSS_GENERIC_MEDIUM;