update tooltips

* separate tooltips script for tab and settings
* settings tooltips are now fixed to fix overflow cut behavior
* update script to set tooltip position related to btn
* update script to handle scroll case
* update css

src/ui/static/js/account.js

@@ -1,4 +1,66 @@
-import { Tabs, Popover } from "./utils/settings.js";
+import { Tabs } from "./utils/settings.js";
+
+class TabPopover {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    window.addEventListener("pointerover", (e) => {
+      //POPOVER LOGIC
+      try {
+        if (
+          e.target.closest("button").hasAttribute(`data-popover-btn`) ||
+          e.target.closest("svg").hasAttribute(`data-popover-btn`)
+        ) {
+          this.showPopover(e.target);
+        }
+      } catch (err) {}
+    });
+
+    window.addEventListener("pointerout", (e) => {
+      //POPOVER LOGIC
+      try {
+        if (
+          e.target.closest("button").hasAttribute(`data-popover-btn`) ||
+          e.target.closest("svg").hasAttribute(`data-popover-btn`)
+        ) {
+          this.hidePopover(e.target);
+        }
+      } catch (err) {}
+    });
+  }
+
+  showPopover(el) {
+    const btn = el.closest("button").hasAttribute("data-popover-btn")
+      ? el.closest("button")
+      : el.closest("svg");
+    const popoverName = btn.getAttribute("data-popover-btn");
+    //toggle curr popover
+    const popover = btn.parentElement.querySelector(
+      `[data-popover-content=${popoverName}]`,
+    );
+    popover.classList.add("transition-all", "delay-200", "opacity-0");
+    popover.classList.remove("hidden");
+    setTimeout(() => {
+      popover.classList.remove("opacity-0");
+    }, 10);
+  }
+
+  hidePopover(el) {
+    const btn = el.closest("button").hasAttribute("data-popover-btn")
+      ? el.closest("button")
+      : el.closest("svg");
+    const popoverName = btn.getAttribute("data-popover-btn");
+    //toggle curr popover
+    const popover = btn.parentElement.querySelector(
+      `[data-popover-content=${popoverName}]`,
+    );
+    popover.classList.add("hidden");
+    popover.classList.remove("transition-all", "delay-200");
+  }
+}
+
 
 class SubmitAccount {
   constructor() {
@@ -131,5 +193,5 @@ class SwitchTabForm {
 const setPWBtn = new PwBtn();
 const setSubmit = new SubmitAccount();
 const setTabs = new Tabs();
-const setPopover = new Popover();
+const setTabPopover = new TabPopover();
 const setSwitchTabForm = new SwitchTabForm();

src/ui/static/js/utils/settings.js

@@ -1,9 +1,19 @@
 class Popover {
   constructor() {
     this.init();
+    this.visiblePopover = null;
+    this.relateBtn = null;
   }
 
   init() {
+    window.addEventListener("scroll", (e) => { 
+      try {
+        this.hidePopover(this.relateBtn);
+      }catch(e) {
+
+      }
+       }, true);
+
     window.addEventListener("pointerover", (e) => {
       //POPOVER LOGIC
       try {
@@ -38,11 +48,17 @@ class Popover {
     const popover = btn.parentElement.querySelector(
       `[data-popover-content=${popoverName}]`,
     );
+    
     popover.classList.add("transition-all", "delay-200", "opacity-0");
     popover.classList.remove("hidden");
+
+    this.visiblePopover = popover;
+    this.relateBtn = btn;
+    this.updatePos();
+
     setTimeout(() => {
       popover.classList.remove("opacity-0");
-    }, 10);
+    }, 100);
   }
 
   hidePopover(el) {
@@ -57,6 +73,19 @@ class Popover {
     popover.classList.add("hidden");
     popover.classList.remove("transition-all", "delay-200");
   }
+
+  updatePos() {
+    const btn = this.relateBtn;
+    const popover = this.visiblePopover;
+
+    const btnRect = btn.getBoundingClientRect();
+    const btnTop = btnRect.y;
+    const btnLeft = btnRect.x;
+
+    popover.style.top = `${btnTop - popover.getBoundingClientRect().height + 20}px`;
+    popover.style.left = `${btnLeft - popover.getBoundingClientRect().width / 3}px`;
+  }
+
 }
 
 class TabsSelect {

src/ui/styles.css

@@ -92,6 +92,11 @@
 }
 
 .popover-settings-container {
+  @apply z-[1000] h-fit max-w-[250px] transition-all duration-500 dark:brightness-90 transition rounded-md p-3 -translate-y-7 fixed bg-blue-500;
+}
+
+
+.popover-tab {
   @apply transition-all duration-500 dark:brightness-90 transition z-50 rounded-md p-3 left-0 -translate-y-7 bottom-0 absolute bg-blue-500;
 }