Index: lams_central/web/includes/javascript/portrait.js
===================================================================
diff -u -rd0b0ba33d9c8c8d96876b9de3263ac77643ba35a -rbcaaf5a30589260995755b4d83133af1bc6f8bc2
--- lams_central/web/includes/javascript/portrait.js	(.../portrait.js)	(revision d0b0ba33d9c8c8d96876b9de3263ac77643ba35a)
+++ lams_central/web/includes/javascript/portrait.js	(.../portrait.js)	(revision bcaaf5a30589260995755b4d83133af1bc6f8bc2)
@@ -88,6 +88,8 @@
 	
 	if ( ! placement )
 		placement = 'right';
+		
+	placement = 'auto ' + placement;
 	
 	$('.new-popover').each(function( index, element ) {
 		if ( ! element.dataset ) {
Index: lams_monitoring/web/css/_monitorLesson_base.scss
===================================================================
diff -u -r56bc1b92bc03ddf1673c972928eedb8a60c882ef -rbcaaf5a30589260995755b4d83133af1bc6f8bc2
--- lams_monitoring/web/css/_monitorLesson_base.scss	(.../_monitorLesson_base.scss)	(revision 56bc1b92bc03ddf1673c972928eedb8a60c882ef)
+++ lams_monitoring/web/css/_monitorLesson_base.scss	(.../_monitorLesson_base.scss)	(revision bcaaf5a30589260995755b4d83133af1bc6f8bc2)
@@ -305,19 +305,22 @@
 
 /********** SEQUENCE TAB STYLES **********/
 div#sequenceCanvas {
-	position: relative;
-	text-align: center;
-	width: 100%;
-	height: 100%;
-	overflow: auto;
-}
+  position: relative;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  overflow: auto; }
   
 div#sequenceCanvas div.learner-icon, #completedLearnersContainer div.learner-icon {
 	display: inline-block;
 	border-radius : 20px;
 	background-color : #FFFFFF;
 }
 
+#completedLearnersContainer div.learner-icon {
+	margin-right: 5px;	
+}
+
 div#sequenceCanvas div.learner-icon.learner-searched {
 	border: red 3px solid;
 	border-radius: 25px;
@@ -345,6 +348,28 @@
 	text-align: center;
 }
 
+div#sequenceCanvas div.more-learner-icon > a, #completedLearnersContainer div.more-learner-icon > a {
+	color: black;
+	text-decoration: none;
+	outline: none;
+}
+
+div.more-learner-popover {
+	max-width: 460px;
+	max-height: 500px;
+	overflow: auto;
+}
+
+div.more-learner-popover div.more-learner-popover-icon {
+	display : inline-block;
+	text-align : center;
+	margin-right: 5px;
+}
+
+div.more-learner-popover div.more-learner-popover-icon > p {
+	font-size : 10px;
+}
+
 div#sequenceCanvas .activity-requires-attention {
 	position: absolute;
 	cursor  : pointer;
Index: lams_monitoring/web/includes/javascript/monitorLesson.js
===================================================================
diff -u -r56bc1b92bc03ddf1673c972928eedb8a60c882ef -rbcaaf5a30589260995755b4d83133af1bc6f8bc2
--- lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision 56bc1b92bc03ddf1673c972928eedb8a60c882ef)
+++ lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision bcaaf5a30589260995755b4d83133af1bc6f8bc2)
@@ -22,7 +22,7 @@
 	learnerProgressCurrentPageNumber = 1,
 
 //auto refresh all tabs every 30 seconds
-	autoRefreshInterval = 99990 * 1000,
+	autoRefreshInterval = 30 * 1000,
 	autoRefreshIntervalObject = null,
 // when user is doing something, do not auto refresh
 	autoRefreshBlocked = false,
@@ -1539,6 +1539,13 @@
 		return;
 	}
 	
+	/*
+	if (activity.learners) {
+		activity.learners = [...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners]
+		activity.learnerCount = activity.learners.length;
+    }
+    */
+
 	// add group of users icon
 	var learningDesignSvg = $('svg.learningDesignSvg', sequenceCanvas),
 		isTool = activity.type == 1,
@@ -1557,20 +1564,26 @@
 					.addClass('activity-requires-attention')
 					.appendTo(sequenceCanvas)
 				: null,
-		
+		allLearnersIcon = activity.learnerCount > 0 ?
+						$('<div />')
+
+							.css({
+								'position' : 'absolute'
+							})
+							.addClass('more-learner-icon')
+							.append($('<a />').attr({
+								role : 'button',
+								tabindex : 0
+							}))
+							: null,
 		learningDesignSvgViewbox = learningDesignSvg.attr('viewBox').split(' '),
 		learningDesignSvgInternalLeftOffset = +learningDesignSvgViewbox[0],
 		learningDesignSvgInternalTopOffset = +learningDesignSvgViewbox[1],
 		learningDesignSvgExternalOffset = learningDesignSvg.offset(),
 		activityLeftOffset = learningDesignSvgExternalOffset.left + coord.x - learningDesignSvgInternalLeftOffset + sequenceCanvas.scrollLeft(),
 		activityTopOffset  = learningDesignSvgExternalOffset.top  + coord.y - learningDesignSvgInternalTopOffset + sequenceCanvas.scrollTop();
 		
-		/*
-		if (activity.learners) {
-			activity.learners = [...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners]
-			activity.learnerCount = activity.learners.length;
-	    }
-	*/
+
 	if (isTool || isGrouping) {
 		if (activity.learnerCount > 0) {
 			// if learners reached the activity, make room for their icons: make activity icon and label smaller and move to top
@@ -1619,37 +1632,35 @@
 			});
 			
 			if (activity.learnerCount > 8) {
-				$('<div />')
+				allLearnersIcon
 					  .attr('id', 'act' + activity.id + 'learnerGroup')
 					  .css({
-						'position' : 'absolute',
 						'left'     : activityLeftOffset + 138 + 'px',
 						'top'      : activityTopOffset  - 60  + 'px',
 						'z-index'  : 108
 					  })
-					  .addClass('more-learner-icon')
-					  .text('+' + (activity.learnerCount - 7))
-					  .appendTo(sequenceCanvas);
+					  .appendTo(sequenceCanvas)
+					  .children('a').text('+' + (activity.learnerCount - 7));
+			
+			allLearnersIcon.popover('show');
 			}
 		}
 		
 		if (requiresAttentionIcon) {
 			requiresAttentionIcon.css({
-				'left'     :  activityLeftOffset    + 160 + 'px',
+				'left'     : activityLeftOffset    + 160 + 'px',
 				'top'      : activityTopOffset  - 95  + 'px'
 			});
 		}
 	} else if (isGate) {
 		if (activity.learnerCount > 0) {
-			$('<div />')
+			allLearnersIcon
 				  .css({
-					'position' : 'absolute',
 					'left'     : activityLeftOffset + 'px',
 					'top'      : activityTopOffset  - 80  + 'px'
 				  })
-				  .addClass('more-learner-icon')
-				  .text(activity.learnerCount)
-				  .appendTo(sequenceCanvas);
+				  .appendTo(sequenceCanvas)
+		 		  .children('a').text(activity.learnerCount);
 		}
 		
 		if (requiresAttentionIcon) {
@@ -1660,34 +1671,30 @@
 		}
 	} else if (isBranching) {
 		if (activity.learnerCount > 0) {
-			$('<div />')
+			allLearnersIcon
 				  .css({
-					'position' : 'absolute',
 					'left'     : activityLeftOffset - 20  + 'px',
 					'top'      : activityTopOffset  - 100  + 'px'
 				  })
-				  .addClass('more-learner-icon')
-				  .text(activity.learnerCount)
-				  .appendTo(sequenceCanvas);
+				  .appendTo(sequenceCanvas)
+				  .children('a').text(activity.learnerCount);
 		}		
 		
 		if (requiresAttentionIcon) {
 			requiresAttentionIcon.css({
-				'left'     :  activityLeftOffset - 13 + 'px',
+				'left'     : activityLeftOffset - 13 + 'px',
 				'top'      : activityTopOffset  - 124  + 'px'
 			});
 		}
 	} else if (isContainer) {
 		if (activity.learnerCount > 0) {
-			$('<div />')
+			allLearnersIcon
 				  .css({
-					'position' : 'absolute',
 					'left'     : activityLeftOffset + coord.width - 50 + 'px',
 					'top'      : activityTopOffset  - 98  + 'px'
 				  })
-				  .addClass('more-learner-icon')
-				  .text(activity.learnerCount)
-				  .appendTo(sequenceCanvas);
+				  .appendTo(sequenceCanvas)
+				  .children('a').text(activity.learnerCount);
 		}
 		
 		if (requiresAttentionIcon) {
@@ -1758,7 +1765,30 @@
 	}
 		
 	if (activity.learnerCount > 0){
-		var learnerGroup = $('#act' + activity.id + 'learnerGroup', sequenceCanvas);
+		var learnerGroup = $('#act' + activity.id + 'learnerGroup', sequenceCanvas)
+							.popover({
+								content: function(){
+									var learnerPopoverContainer = $('<div />');
+									
+									$.each(activity.learners, function(learnerIndex, learner){
+										$('<div />').addClass('more-learner-popover-icon')
+										   .append(definePortrait(learner.portraitId, learner.id, STYLE_SMALL, true, LAMS_URL))
+										   .append($('<p />').text(getLearnerDisplayName(learner)))
+										   .appendTo(learnerPopoverContainer);
+									});
+									
+									return learnerPopoverContainer.html();
+								},
+								template : '<div class="popover more-learner-popover" role="tooltip"><div class="arrow"></div>' + 
+										   '<h3 class="popover-title"></h3><div class="popover-content"></div></div>',
+								sanitize : false,
+								html: true,
+						        trigger: 'focus hover',
+						        delay: { "show": 400, "hide": 100 },
+						        container: 'body', // ensures popovers are not clipped within jqgrid tables
+						        placement: 'auto right'
+							});
+							
 		dblTap(learnerGroup, function(event){
 			 // double click on learner group icon to see list of learners
 			event.stopPropagation();