Fixed hover issue - now allows scrolling

gchq · Jul 28, 2017 · 9ee0964 · 9ee0964
1 parent 33ecbfa
commit 9ee0964
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/src/web/HTMLOperation.js b/src/web/HTMLOperation.js
@@ -50,8 +50,8 @@ HTMLOperation.prototype.toStubHtml = function(removeIcon) {
     let html = "<li class='operation'";
 
     if (this.description) {
-        html += " data-container='body' data-toggle='popover' data-placement='auto right'\
-            data-content=\"" + this.description + "\" data-html='true' data-trigger='focus' tabindex='0'";
+        html += " data-container='body' data-placement='auto right'\
+            data-content=\"" + this.description + "\"";
     }
 
     html += ">" + this.name;

diff --git a/src/web/OperationsWaiter.js b/src/web/OperationsWaiter.js
@@ -155,7 +155,22 @@ OperationsWaiter.prototype.getSelectedOp = function(ops) {
  */
 OperationsWaiter.prototype.opListCreate = function(e) {
     this.manager.recipe.createSortableSeedList(e.target);
-    $("[data-toggle=popover]").popover();
+    // Allows popover to gain focus for eg. pressing buttons/scrolling
+    $(".operation").popover({trigger: "manual", html: true, animation: true})
+        .on("mouseenter", function () {
+            const _this = this;
+            $(this).popover("show");
+            $(".popover").on("mouseleave", function () {
+                $(_this).popover("hide");
+            });
+        }).on("mouseleave", function () {
+            const _this = this;
+            setTimeout(function () {
+                if (!$(".popover:hover").length) {
+                    $(_this).popover("hide");
+                }
+            }, 50);
+        });
 };