From be68c64a7e33abb7b933278d2eb948c51ae0d7ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felipe=20Ba=C3=B1ados=20Schwerter?= <banadoss@ualberta.ca>
Date: Tue, 16 Jul 2024 19:04:20 +0000
Subject: [PATCH] Changes for #1183

---
 frontend/js/tooltip.js | 55 ++++++++++++++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 13 deletions(-)

diff --git a/frontend/js/tooltip.js b/frontend/js/tooltip.js
index 53d178dc8..d045952a6 100644
--- a/frontend/js/tooltip.js
+++ b/frontend/js/tooltip.js
@@ -3,8 +3,18 @@ import { createPopper } from "@popperjs/core/dist/esm/popper";
 
 const showEvents = ["mouseenter", "focus"];
 const hideEvents = ["mouseleave", "blur"];
+const permanenceChangeEvents = ["click"];
+const outsidePopupCloseEvents = ["click"];
 
-let popperInstance = null;
+/**
+ * prepare the popup and the icon. Attach relevant handlers
+ *
+ * @param icon {Element}: icon that triggers the popup on hover/click/focus
+ * @param popup {Element}: the popup that shows up
+ */
+export function createTooltip(icon, popup) {
+  let permanent = false;
+  let popperInstance = null;
 
 /**
  * @param {Element} icon
@@ -30,24 +40,43 @@ function destroy() {
   }
 }
 
-/**
- * prepare the popup and the icon. Attach relevant handlers
- *
- * @param icon {Element}: icon that triggers the popup on hover/click/focus
- * @param popup {Element}: the popup that shows up
- */
-export function createTooltip(icon, popup) {
-  for (let event of showEvents) {
-    icon.addEventListener(event, () => {
+  function show () {
+    if(!popperInstance){
       popup.setAttribute("data-show", "");
       create(icon, popup);
-    });
+    }
+  }
+  function hide () {
+    if (!permanent && popperInstance) {
+      popup.removeAttribute("data-show");
+      destroy();
+    }
+  }
+  for (let event of showEvents) {
+    icon.addEventListener(event, show);
   }
 
   for (let event of hideEvents) {
+    icon.addEventListener(event, hide);
+  }
+
+  for (let event of permanenceChangeEvents) {
     icon.addEventListener(event, () => {
-      popup.removeAttribute("data-show");
-      destroy();
+      permanent = !permanent;
+      if (!permanent) {
+        hide();
+      } else {
+        show();
+      }
+    });
+  }
+
+  for (let event of outsidePopupCloseEvents) {
+    document.addEventListener(event, (event) => {
+      if (!popup.contains(event.target) && !icon.contains(event.target)){
+        permanent = false;
+        hide();
+      }
     });
   }
 }