overlays tool tip (with description) is not hidden after few seconds

frontend-js/src/main/css/global.css

@@ -677,14 +677,14 @@ a.adminLink:hover {
 
 .minerva-login-form {
     height: 100%;
-    background-color:#FFFFFF;
-    box-shadow:0 3px 30px #B9B9B9;
-    width:320px;
-    padding:20px;
-    margin:20px auto;
-    color:#666666;
-    font-size:13px;
-    font-weight:900;
+    background-color: #FFFFFF;
+    box-shadow: 0 3px 30px #B9B9B9;
+    width: 320px;
+    padding: 20px;
+    margin: 20px auto;
+    color: #666666;
+    font-size: 13px;
+    font-weight: 900;
 }
 
 .minerva-login-form-title {
@@ -705,21 +705,51 @@ a.adminLink:hover {
     font-weight: 900
 }
 
-.minerva-ol-bottom-left{
+.minerva-ol-bottom-left {
     bottom: .5em;
     left: .5em;
 }
 
-.minerva-ol-bottom-right{
+.minerva-ol-bottom-right {
     bottom: .5em;
     right: .5em;
 }
 
-.minerva-ol-top-right{
+.minerva-ol-top-right {
     top: .5em;
     right: .5em;
 }
 
 .popover {
     max-width: 600px;
+}
+
+/*
+https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip
+ */
+.minerva-tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.minerva-tooltip .minerva-tooltip-text {
+    visibility: hidden;
+    width: 120px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+
+    /* Position the tooltip */
+    position: absolute;
+    z-index: 1;
+}
+
+.minerva-tooltip:hover .minerva-tooltip-text {
+    visibility: visible;
+}
+
+.minerva-overlay-panel {
+    overflow-x: hidden;
 }
\ No newline at end of file

frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js

@@ -32,6 +32,10 @@ function OverlayPanel(params) {
     + "<p>Custom overlays are user-provided overlays, this menu becomes available upon login (see below).</p>";
   Panel.call(this, params);
 
+  //overflow is defined in minerva-overlay-panel, so remove the one that is already there
+  $(params.element).css("overflow", "");
+  $(params.element).addClass("minerva-overlay-panel");
+
   var self = this;
 
   self._createOverlayPanelGui();
@@ -279,11 +283,6 @@ OverlayPanel.prototype.createOverlayRow = function (overlay, checked) {
  * @returns {Array}
  */
 OverlayPanel.prototype.overlayToDataRow = function (overlay, checked) {
-  // if (checked && !overlay.getInputDataAvailable()) {
-  //   result.className = "active";
-  // }
-  // result.title = overlay.getDescription();
-
   var result = [];
   result[0] = overlay.getOrder();
   result[1] = overlay.getName();
@@ -305,6 +304,14 @@ OverlayPanel.prototype.overlayToDataRow = function (overlay, checked) {
   } else {
     result[4] = "";
   }
+  if (overlay.getDescription() !== "") {
+    for (var i = 0; i < result.length; i++) {
+
+      result[i] = "<div class=\"minerva-tooltip\">" + result[i] +
+        "<span class=\"minerva-tooltip-text\">" + overlay.getDescription() + "</span>" +
+        "</div>";
+    }
+  }
   return result;
 };