diff --git a/frontend-js/src/main/css/global.css b/frontend-js/src/main/css/global.css
index a4164f27c42f09b6099346093debd292b017941a..d47e637925546ea4e768f4339a62641ce0aa35bb 100644
--- a/frontend-js/src/main/css/global.css
+++ b/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
diff --git a/frontend-js/src/main/js/gui/AbstractGuiElement.js b/frontend-js/src/main/js/gui/AbstractGuiElement.js
index b44f29a2d774fa5a69ef2bb193b58f0cb60d7a71..3ba1e7fdc6fd227ac9871e8fd87e19a625c9c160 100644
--- a/frontend-js/src/main/js/gui/AbstractGuiElement.js
+++ b/frontend-js/src/main/js/gui/AbstractGuiElement.js
@@ -179,4 +179,5 @@ AbstractGuiElement.prototype.askConfirmRemoval = function (params) {
   })
 };
 
+
 module.exports = AbstractGuiElement;
diff --git a/frontend-js/src/main/js/gui/AddOverlayDialog.js b/frontend-js/src/main/js/gui/AddOverlayDialog.js
index 2e4cd33aa17e91782800ecb7cb82aacb18b12ac6..8d730471ae36be7564ed0b13bdb6f4778a0c8c91 100644
--- a/frontend-js/src/main/js/gui/AddOverlayDialog.js
+++ b/frontend-js/src/main/js/gui/AddOverlayDialog.js
@@ -179,8 +179,13 @@ AddOverlayDialog.prototype.addOverlay = function () {
   });
 };
 
+/**
+ *
+ * @returns {PromiseLike}
+ */
 AddOverlayDialog.prototype.destroy = function () {
   $(this.getElement()).dialog("destroy");
+  return Promise.resolve();
 };
 
 AddOverlayDialog.prototype.open = function () {
diff --git a/frontend-js/src/main/js/gui/Panel.js b/frontend-js/src/main/js/gui/Panel.js
index 5d9f683e9556dc4d1c155959367597057e383ac8..9c234d065372159976581817d35a9dcf62de9bfb 100644
--- a/frontend-js/src/main/js/gui/Panel.js
+++ b/frontend-js/src/main/js/gui/Panel.js
@@ -77,7 +77,7 @@ Panel.prototype.disablePanel = function (message) {
   var self = this;
 
   $(self.getElement()).children().css("visibility", "hidden");
-  $("[class='minerva-help-button']",self.getElement()).children().css("visibility", "visible");
+  $("[class='minerva-help-button']", self.getElement()).children().css("visibility", "visible");
   var hideReasonDiv = document.createElement("div");
   hideReasonDiv.className = "searchPanel";
 
@@ -99,14 +99,6 @@ Panel.prototype.setMap = function (map) {
   this._map = map;
 };
 
-/**
- *
- * @returns {CustomMap}
- */
-Panel.prototype.getMap = function () {
-  return this._map;
-};
-
 Panel.prototype.setPanelName = function (panelName) {
   this._panelName = panelName;
 };
@@ -304,4 +296,13 @@ Panel.prototype.destroy = function () {
   }
 };
 
+/**
+ *
+ * @returns {ServerConnector}
+ */
+Panel.prototype.getServerConnector = function () {
+  return this.getMap().getServerConnector();
+};
+
+
 module.exports = Panel;
diff --git a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
index c538683bfd90e4d0d46cc0ac57b47951fc427bd8..0a0034794fb980e5ab5bc8061c5836333f2e7d61 100644
--- a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
+++ b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
@@ -13,14 +13,29 @@ var Functions = require('../../Functions');
 
 var Promise = require('bluebird');
 
+/**
+ *
+ * @param {Object} params
+ * @param {Configuration} [params.configuration]
+ * @param {HTMLElement} params.element
+ * @param {Project} params.project
+ * @param {CustomMap} params.customMap
+ * @param params.parent
+ * @constructor
+ * @extends Panel
+ */
 function OverlayPanel(params) {
-  params.panelName = "overlays";
-  params.scrollable = true;
-  params.helpTip = "<p>Overlays tab allows to display or generate custom coloring of elements and interactions in the map.</p>"
+  params["panelName"] = "overlays";
+  params["scrollable"] = true;
+  params["helpTip"] = "<p>Overlays tab allows to display or generate custom coloring of elements and interactions in the map.</p>"
     + "<p>General overlays are overlays accessible for every user viewing the content.</p>"
     + "<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();
@@ -64,7 +79,7 @@ function OverlayPanel(params) {
   });
   $(self.getElement()).on("click", "[name='download-overlay']", function () {
     var overlayId = $(this).attr("data");
-    return ServerConnector.getOverlaySourceDownloadUrl({
+    return self.getServerConnector().getOverlaySourceDownloadUrl({
       overlayId: overlayId
     }).then(function (url) {
       return self.downloadFile(url);
@@ -81,6 +96,10 @@ function OverlayPanel(params) {
 OverlayPanel.prototype = Object.create(Panel.prototype);
 OverlayPanel.prototype.constructor = OverlayPanel;
 
+/**
+ *
+ * @private
+ */
 OverlayPanel.prototype._createOverlayPanelGui = function () {
   var generalOverlaysDiv = Functions.createElement({
     type: "div",
@@ -156,7 +175,15 @@ OverlayPanel.prototype.clear = function () {
   table.clear().draw();
 };
 
+/**
+ *
+ * @param {boolean} [edit=false]
+ * @returns {HTMLElement}
+ */
 OverlayPanel.prototype.createTableHeader = function (edit) {
+  if (edit === undefined) {
+    edit = false;
+  }
   var result = document.createElement("thead");
 
   var row = document.createElement("tr");
@@ -183,6 +210,12 @@ OverlayPanel.prototype.createTableHeader = function (edit) {
   return result;
 };
 
+/**
+ *
+ * @param {DataOverlay} overlay
+ * @param {boolean} checked
+ * @returns {HTMLElement}
+ */
 OverlayPanel.prototype.createOverlayRow = function (overlay, checked) {
   var self = this;
   var guiUtils = self.getGuiUtils();
@@ -243,12 +276,13 @@ OverlayPanel.prototype.createOverlayRow = function (overlay, checked) {
   return result;
 };
 
+/**
+ *
+ * @param {DataOverlay} overlay
+ * @param {boolean} 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();
@@ -270,9 +304,21 @@ 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;
 };
 
+/**
+ *
+ * @param {DataOverlay} overlay
+ */
 OverlayPanel.prototype.openEditOverlayDialog = function (overlay) {
   var self = this;
   var guiUtils = self.getGuiUtils();
@@ -291,7 +337,7 @@ OverlayPanel.prototype.openEditOverlayDialog = function (overlay) {
       var windowSelf = this;
       overlay.setName(nameInput.value);
       overlay.setDescription(descriptionInput.value);
-      return ServerConnector.updateOverlay(overlay).then(function () {
+      return self.getServerConnector().updateOverlay(overlay).then(function () {
         return self.refresh();
       }).then(function () {
         $(windowSelf).dialog("close");
@@ -325,16 +371,24 @@ OverlayPanel.prototype.openEditOverlayDialog = function (overlay) {
   });
 };
 
+/**
+ *
+ * @param {boolean} [showDefault=false]
+ * @returns {PromiseLike}
+ */
 OverlayPanel.prototype.refresh = function (showDefault) {
+  if (showDefault === undefined) {
+    showDefault = false;
+  }
   var self = this;
   var user = null;
 
   var overlayTypes = [];
   var selectedOverlay = [];
 
-  return ServerConnector.getOverlayTypes().then(function (types) {
+  return self.getServerConnector().getOverlayTypes().then(function (types) {
     overlayTypes = types;
-    return ServerConnector.getLoggedUser();
+    return self.getServerConnector().getLoggedUser();
   }).then(function (loggedUser) {
     user = loggedUser;
     return self.getMap().getVisibleDataOverlays();
@@ -343,7 +397,7 @@ OverlayPanel.prototype.refresh = function (showDefault) {
       selectedOverlay[visibleDataOverlays[j].getId()] = true;
     }
 
-    return ServerConnector.getOverlays({
+    return self.getServerConnector().getOverlays({
       publicOverlay: false,
       creator: user.getLogin()
     });
@@ -398,7 +452,7 @@ OverlayPanel.prototype.refresh = function (showDefault) {
       title.innerHTML = self.getCustomOverlaysMessage();
       addButton.style.display = "block";
 
-      table = $(tableElement).on('order.dt', function (e) {
+      table = $(tableElement).on('order.dt', function () {
         if ($(tableElement).dataTable().fnSettings().aaSorting[0][0] === 0) {
           table.rowReorder.enable();
         } else {
@@ -431,15 +485,27 @@ OverlayPanel.prototype.refresh = function (showDefault) {
   });
 };
 
+/**
+ *
+ * @param {string} customOverlaysMessage
+ */
 OverlayPanel.prototype.setCustomOverlaysMessage = function (customOverlaysMessage) {
   this._customOverlaysMessage = customOverlaysMessage;
 };
 
+/**
+ *
+ * @returns {string}
+ */
 OverlayPanel.prototype.getCustomOverlaysMessage = function () {
   return this._customOverlaysMessage;
 };
 
 
+/**
+ *
+ * @returns {PromiseLike}
+ */
 OverlayPanel.prototype.openAddOverlayDialog = function () {
   var self = this;
   if (self._addOverlayDialog !== undefined) {
@@ -459,9 +525,13 @@ OverlayPanel.prototype.openAddOverlayDialog = function () {
   });
 };
 
+/**
+ *
+ * @returns {PromiseLike}
+ */
 OverlayPanel.prototype.init = function () {
   var self = this;
-  var backgroundOverlay = ServerConnector.getSessionData().getSelectedBackgroundOverlay();
+  var backgroundOverlay = self.getServerConnector().getSessionData().getSelectedBackgroundOverlay();
   var showDefault = (backgroundOverlay === undefined || backgroundOverlay === "undefined");
   var table = $(this.getControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TABLE)).DataTable({
     columns: [{
@@ -487,7 +557,7 @@ OverlayPanel.prototype.init = function () {
     info: false,
     rowReorder: true
   });
-  table.on('row-reorder', function (e, diff, edit) {
+  table.on('row-reorder', function (e, diff) {
     var promises = [];
 
     for (var i = 0, ien = diff.length; i < ien; i++) {
@@ -501,22 +571,39 @@ OverlayPanel.prototype.init = function () {
 
   return this.refresh(showDefault);
 };
+
+/**
+ *
+ * @param {number} overlayId
+ * @param {number} order
+ * @returns {PromiseLike}
+ */
 OverlayPanel.prototype.updateOverlayOrder = function (overlayId, order) {
   var self = this;
   return self.getProject().getDataOverlayById(overlayId).then(function (overlay) {
     overlay.setOrder(order);
-    return ServerConnector.updateOverlay(overlay);
+    return self.getServerConnector().updateOverlay(overlay);
   });
 };
+
+/**
+ *
+ * @param {DataOverlay} overlay
+ * @returns {PromiseLike<any>}
+ */
 OverlayPanel.prototype.removeOverlay = function (overlay) {
-  self = this;
+  var self = this;
   return self.getMap().hideDataOverlay(overlay.getId()).then(function () {
-    return ServerConnector.removeOverlay({overlayId: overlay.getId()});
+    return self.getServerConnector().removeOverlay({overlayId: overlay.getId()});
   }).then(function () {
     return self.refresh();
   })
 };
 
+/**
+ *
+ * @returns {PromiseLike}
+ */
 OverlayPanel.prototype.destroy = function () {
   var self = this;
   Panel.prototype.destroy.call(this);