conflicts hover over message

css/styles.css

@@ -234,6 +234,31 @@
     outline: 0;
 }
 
+
+.tooltip {
+  position: relative;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  background-color: black;
+  background:rgba(1,1,1,0.5);
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  font-size: 10px;
+  max-width: 50px;
+  margin-left: 5px;
+  padding: 5px 10px;
+  z-index: 2;
+  position: absolute;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+
 @-webkit-keyframes fadein {
     from {
         bottom: 0;

js/background.js

@@ -228,12 +228,14 @@ function checkConflicts(sendResponse) {
 function isSingleConflict(currdatearr, unique, sendResponse) {
     chrome.storage.sync.get('savedCourses', function (data) {
         var courses = data.savedCourses;
+        var conflict_list = [];
         var conflict = false;
         var contains = false;
         for (let i = 0; i < courses.length; i++) {
             let course = courses[i];
-            if (!conflict && isConflict(currdatearr, course.datetimearr)) {
+            if (isConflict(currdatearr, course.datetimearr)) {
                 conflict = true;
+                conflict_list.push(course);
             }
             if (!contains && isSameCourse(course, unique)) {
                 contains = true;
@@ -241,7 +243,8 @@ function isSingleConflict(currdatearr, unique, sendResponse) {
         }
         sendResponse({
             isConflict: conflict,
-            alreadyContains: contains
+            alreadyContains: contains,
+            conflictList: conflict_list
         });
     });
 }

js/courseCatalog.js

@@ -194,9 +194,10 @@ function updateListConflictHighlighting(start = 0) {
 					}, (response) => {
 						let {
 							isConflict,
-							alreadyContains
+							alreadyContains,
+							conflictList
 						} = response
-						updateTextHighlighting($(this).find('td'), canHighlight, isConflict, alreadyContains);
+						updateTextHighlighting($(this).find('td'), canHighlight, isConflict, alreadyContains, conflictList, $(this), unique);
 					});
 				}
 			}
@@ -204,11 +205,35 @@ function updateListConflictHighlighting(start = 0) {
 	});
 }
 
-function updateTextHighlighting(tds, canHighlight, isConflict, alreadyContains) {
+function updateTextHighlighting(tds, canHighlight, isConflict, alreadyContains, conflictList, row, unique) {
+	if(conflictList.length){
+		console.log(conflictList);
+	}
+	conflict_texts = row.find('.tooltiptext');
+	let unique_list = conflictList.filter(function(course){
+		if(course.unique != unique){
+			return true;
+		}
+		return false;
+	}).map(function(course){
+		return course.unique;
+	});
+	if(isConflict && unique_list.length){
+		if(conflict_texts){
+			row.find('.tooltiptext').remove();
+		}
+		row.addClass('tooltip');
+		row.append(`<span class='tooltiptext'><span style='text-decoration: underline;'>Conflicts:</span> ${unique_list.join(',\n')}</span>`);
+	} else {
+		row.removeClass('tooltip');
+		conflict_texts.remove();
+	}
 	let current_color = rgb2hex(tds.css('color'));
 	if (isConflict && canHighlight && !alreadyContains) {
-		if (current_color != Colors.highlight_conflict)
+		if (current_color != Colors.highlight_conflict){
-			tds.css('color', Colors.highlight_conflict).css('text-decoration', 'line-through').css('font-weight', 'normal');
+			tds.css('color', Colors.highlight_conflict).css('text-decoration', 'line-through').css('font-weight', 'normal')
+		}
+
 	} else if (!alreadyContains) {
 		if (tds.css('color') != Colors.highlight_default)
 			tds.css('color', Colors.highlight_default).css('text-decoration', 'none').css('font-weight', 'normal');