Index: lams_central/web/css/_learner_base.scss
===================================================================
diff -u -re6b3b4b473ebb151c10733808c40d4276b4f81ab -ra9f62e22a4fe8d5adcf84322fbd833c217028fde
--- lams_central/web/css/_learner_base.scss	(.../_learner_base.scss)	(revision e6b3b4b473ebb151c10733808c40d4276b4f81ab)
+++ lams_central/web/css/_learner_base.scss	(.../_learner_base.scss)	(revision a9f62e22a4fe8d5adcf84322fbd833c217028fde)
@@ -791,24 +791,7 @@
     @include box-shadow(0 5px 10px rgba(0,0,0,.2));
 }
 
-// Popovers used in Gradebook to display portraits
-// popover links forced to be the usual link color or jqgrid can interfere
-.popover-link {
-    color: $a-link-default !important;
-}
 
-.popover-link:hover {
-    color: $a-link-default-hover !important;
-}
-
-.popover-link:focus {
-    color: $a-link-default-focus !important;
-}
-
-.popover-title {
-	background-color: $gray-light-mid;
-}
-
 // clickable panel created in CKEditor
 .lams-bootpanel .clickable {
     cursor: pointer;
@@ -1081,3 +1064,26 @@
 	    margin-bottom: 0px;
 	}
 }
+
+// Popovers used in Gradebook to display portraits
+// popover links forced to be the usual link color or jqgrid can interfere
+.popover-link {
+    color: $a-link-default !important;
+}
+
+.popover-link:hover {
+    color: $a-link-default-hover !important;
+}
+
+.popover-link:focus {
+    color: $a-link-default-focus !important;
+}
+
+.popover-title {
+	background-color: $gray-light-mid;
+}
+
+.popover-content-with-portrait {
+	min-height: $portrait-size-image-lg + 20;
+	min-width:  $portrait-size-image-lg + 20;
+}
Index: lams_central/web/includes/javascript/portrait.js
===================================================================
diff -u -refa51a5d0464d96fada4e5a70f1fb86c2d726717 -ra9f62e22a4fe8d5adcf84322fbd833c217028fde
--- lams_central/web/includes/javascript/portrait.js	(.../portrait.js)	(revision efa51a5d0464d96fada4e5a70f1fb86c2d726717)
+++ lams_central/web/includes/javascript/portrait.js	(.../portrait.js)	(revision a9f62e22a4fe8d5adcf84322fbd833c217028fde)
@@ -82,36 +82,63 @@
 // 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) {
+function initializePortraitPopover(LAMS_URL, size, placement) {
 	if ( ! size ) 
 		size = STYLE_LARGE;
 	
+	if ( ! placement )
+		placement = 'right';
+	
 	$('.new-popover').each(function( index, element ) {
-		var idString = element.dataset.id;
-		var url = LAMS_URL + '/download?preferDownload=false&uuid='+element.dataset.portrait+_getSizeVersion(size);
+		if ( ! element.dataset ) {
+			console.log("Warning: portrait dataset missing. Unable to display portrait. "+element.id);
+			return;
+		}
+		if ( element.dataset.portrait ) {
+			var url =  LAMS_URL + '/download?preferDownload=false&uuid='+element.dataset.portrait+_getSizeVersion(size);
+			// uses custom template to set the size of the portrait area
+			var template = '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content popover-content-with-portrait"></div></div>'
 			$(element).popover({
+				template: template, 
 				content: '<img src="'+url+'"/>',  
 				html: true,
 		        trigger: 'hover focus',
 		        title: element.dataset.fullname,
 		        delay: { "show": 400, "hide": 100 },
-		        container: 'body' // ensures popovers are not clipped within jqgrid tables
-		});
-			element.classList.remove('new-popover');
+		        container: 'body',  // ensures popovers are not clipped within jqgrid tables
+		        	placement: placement
+			});
+		} else {
+			$(element).popover({
+				content: element.dataset.fullname,  
+				html: false,
+		        trigger: 'hover focus',
+		        delay: { "show": 400, "hide": 100 },
+		        container: 'body', // ensures popovers are not clipped within jqgrid tables
+		        placement: placement
+			});
+		}
+		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 showNameNoPortrait and portraitId is missing then assume just want to show the name as a hover area. Useful for showing 
+// the portraits in the learner progress. 
+function definePortraitPopover(portraitId, userId, fullName, linkText, showNameNoPortrait) {
 	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 if ( showNameNoPortrait ) {
+		return '<a tabindex="0" class="popover-link new-popover" role="button" data-toggle="popover" data-id="popover-'+userId
+			+'" data-fullname="'+fullName+'">'+linkText+'</a>';
 	} else {
 		return linkText;
 	}
Index: lams_gradebook/web/gradebookCourseMonitor.jsp
===================================================================
diff -u -re6b3b4b473ebb151c10733808c40d4276b4f81ab -ra9f62e22a4fe8d5adcf84322fbd833c217028fde
--- lams_gradebook/web/gradebookCourseMonitor.jsp	(.../gradebookCourseMonitor.jsp)	(revision e6b3b4b473ebb151c10733808c40d4276b4f81ab)
+++ lams_gradebook/web/gradebookCourseMonitor.jsp	(.../gradebookCourseMonitor.jsp)	(revision a9f62e22a4fe8d5adcf84322fbd833c217028fde)
@@ -424,7 +424,7 @@
 
 	  	function userNameFormatter (cellvalue, options, rowObject) {
 	  		var index = rowObject.length - 1;
-			return definePortraitPopover(rowObject[index].innerHTML, rowObject[0].innerHTML, cellvalue);
+			return definePortraitPopover(rowObject[index].innerHTML, rowObject[0].innerHTML, cellvalue, cellvalue, true);
 		}
 		
 	</script>
Index: lams_gradebook/web/gradebookMonitor.jsp
===================================================================
diff -u -re6b3b4b473ebb151c10733808c40d4276b4f81ab -ra9f62e22a4fe8d5adcf84322fbd833c217028fde
--- lams_gradebook/web/gradebookMonitor.jsp	(.../gradebookMonitor.jsp)	(revision e6b3b4b473ebb151c10733808c40d4276b4f81ab)
+++ lams_gradebook/web/gradebookMonitor.jsp	(.../gradebookMonitor.jsp)	(revision a9f62e22a4fe8d5adcf84322fbd833c217028fde)
@@ -506,12 +506,12 @@
 		        })
 
 		        	function userNameFormatter (cellvalue, options, rowObject) {
-					return definePortraitPopover(rowObject[8].innerHTML, rowObject.id, cellvalue);
+					return definePortraitPopover(rowObject[8].innerHTML, rowObject.id, cellvalue, cellvalue, true);
 				}
 
 		        // Combine portraits with activityURL. Both are optional so it is mix and match.
 	       	 	function userNameFormatterActivity (cellvalue, options, rowObject) {
-	       	 		var portProcessed = definePortraitPopover(rowObject[9].innerHTML, rowObject.id, cellvalue);
+	       	 		var portProcessed = definePortraitPopover(rowObject[9].innerHTML, rowObject.id, cellvalue, cellvalue, true);
 	       	 		if ( rowObject.children.length > 10 && rowObject[10].innerHTML.length > 0 ) {
 	       	 			var activityURL = rowObject[10].innerHTML;
 	       	 			if ( portProcessed.indexOf('<a') != -1 ) {
Index: lams_monitoring/web/includes/javascript/monitorLesson.js
===================================================================
diff -u -rb3c871874679a1d784db0d7dfac2fdabe65baf83 -ra9f62e22a4fe8d5adcf84322fbd833c217028fde
--- lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision b3c871874679a1d784db0d7dfac2fdabe65baf83)
+++ lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision a9f62e22a4fe8d5adcf84322fbd833c217028fde)
@@ -36,6 +36,7 @@
 	popupHeight = 720;
 
 
+
 //********** LESSON TAB FUNCTIONS **********
 
 /**
@@ -1028,6 +1029,7 @@
 					});
 				}
 			});	
+			initializePortraitPopover(LAMS_URL, 'large', 'top');
 			
 			sequenceRefreshInProgress = false;
 		}
@@ -1273,20 +1275,29 @@
 			if ([3,4,5,7,13,14].indexOf(activity.type) == -1) {
 				$.each(activity.learners, function(learnerIndex, learner){
 					var learnerDisplayName = getLearnerDisplayName(learner);
-						element = appendXMLElement('image', {
-							'id'         : 'act' + activity.id + 'learner' + learner.id,
-							'x'          : coord.x + learnerIndex*15 + 1,
-							// a bit lower for Optional Activity
-							'y'          : coord.y,
-							'height'     : 16,
-							'width'      : 16,
-							'xlink:href' : LAMS_URL + 'images/icons/' 
-											   + (learner.id == sequenceSearchedLearner ? 'user_red.png'
-											      : (learner.leader ? 'user_online.png' : 'user.png')),
-							'style'		 : 'cursor : pointer'
-						}, null, appendTarget);
-						appendXMLElement('title', null, learnerDisplayName, element);
-					});
+						activityLearnerId = 'act' + activity.id + 'learner' + learner.id,
+						elementAttributes = {
+									'id'			 : activityLearnerId,
+									'x'          : coord.x + learnerIndex*15 + 1,
+									// a bit lower for Optional Activity
+									'y'          : coord.y,
+									'height'     : 16,
+									'width'      : 16,
+									'xlink:href' : LAMS_URL + 'images/icons/' 
+													   + (learner.id == sequenceSearchedLearner ? 'user_red.png'
+													      : (learner.leader ? 'user_online.png' : 'user.png')),
+									'style'		 : 'cursor : pointer',
+									'class'		 : 'popover-link new-popover',
+									'data-toggle': 'popover',
+									'data-id'	 : 'popover-'+activityLearnerId,
+									'data-fullname': learnerDisplayName},
+						element;
+
+					if ( learner.portraitId ) {
+						elementAttributes['data-portrait'] = learner.portraitId;
+					} 
+					element = appendXMLElement('image', elementAttributes, null, appendTarget);
+				});
 			}
 		}
 	}
@@ -1403,13 +1414,18 @@
 	if (learners) {
 		// create learner icons, along with handlers
 		$.each(learners, function(learnerIndex, learner){
-				// make an icon for each learner
+			// make an icon for each learner			
+			var activityLearnerId = 'completedlearner'+learner.id;
 			var icon = $('<img />').attr({
+				'id'	   : activityLearnerId,
 				'src' : LAMS_URL + 'images/icons/' 
 				   		+ (learner.id == sequenceSearchedLearner ? 'user_red.png' : 'user.png'),
 				'style'		 : 'cursor : pointer',
-				'title'      : getLearnerDisplayName(learner)
-			})
+				'class'		 : 'popover-link new-popover',
+				'data-toggle': 'popover',
+				'data-id'	 : 'popover-'+activityLearnerId,
+				'data-fullname': getLearnerDisplayName(learner)
+				})
 				// drag learners to force complete activities
 				  .draggable({
 					'appendTo'    : '#t2',
@@ -1434,6 +1450,9 @@
 					}
 				})
 				.appendTo(iconsContainer);
+			if ( learner.portraitId ) {
+				icon.attr('data-portrait', learner.portraitId);
+			} 
 			
 			if (learner.id == sequenceSearchedLearner){
 				highlightSearchedLearner(icon);