adds tooltip in tabs

undistro · Apr 24, 2024 · 6fa3bab · 6fa3bab
1 parent 9d64423
commit 6fa3bab
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 24 deletions.
diff --git a/web/assets/css/tabs.css b/web/assets/css/tabs.css
@@ -33,13 +33,6 @@
   border-left: 10px solid var(--purple);
 }
 
-.tabs {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  align-items: center;
-}
-
 .tabs::after {
   content: "";
   width: var(--tab-button-width);
@@ -53,6 +46,14 @@
   transition: transform 300ms;
 }
 
+.tabs__wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  align-items: center;
+  position: relative;
+}
+
 .tabs button {
   background-color: transparent;
   border: none;
@@ -77,6 +78,11 @@
   white-space: nowrap;
 }
 
+.tabs .tooltip__content {
+  top: 40px;
+  left: calc(var(--tab-button-width) * var(--hovered-tab));
+}
+
 .dark .tabs button {
   color: white;
 }

diff --git a/web/assets/js/components/tooltips/index.js b/web/assets/js/components/tooltips/index.js
@@ -17,13 +17,46 @@
 const tooltipContainers = document.querySelectorAll(".tooltip__container");
 
 tooltipContainers.forEach((container) => {
-  const tooltipTrigger = container.querySelector("#tooltip__trigger");
-  const tooltipContent = container.querySelector("#tooltip__content");
-  tooltipTrigger?.addEventListener("mouseover", () => {
+  const tooltipTrigger = container.querySelector(".tooltip__trigger");
+  const tooltipContent = container.querySelector(".tooltip__content");
+  tooltipTrigger.addEventListener("mouseover", () => {
     tooltipContent.style.display = "initial";
   });
 
-  tooltipTrigger?.addEventListener("mouseleave", () => {
+  tooltipTrigger.addEventListener("mouseleave", () => {
     tooltipContent.style.display = "none";
   });
 });
+
+export function createTooltip({
+  triggerElement,
+  contentText,
+  onMouseOver,
+  onMouseLeave,
+}) {
+  const container = document.createElement("div");
+  container.className = "tooltip__container";
+  triggerElement.classList.add("tooltip__trigger");
+
+  const divContent = document.createElement("div");
+  divContent.className = "tooltip tooltip__content";
+
+  const spanContent = document.createElement("span");
+  spanContent.className = "tooltip__content--text";
+  spanContent.innerHTML = contentText;
+  divContent.appendChild(spanContent);
+
+  container.appendChild(triggerElement);
+  container.appendChild(divContent);
+
+  triggerElement.onmouseover = () => {
+    onMouseOver();
+    divContent.style.display = "initial";
+  };
+  triggerElement.onmouseleave = () => {
+    onMouseLeave();
+    divContent.style.display = "none";
+  };
+
+  return container;
+}
diff --git a/web/assets/js/utils/render-functions.js b/web/assets/js/utils/render-functions.js
@@ -15,6 +15,7 @@
  */
 
 import { hideAccordions } from "../components/accordions/result.js";
+import { createTooltip } from "../components/tooltips/index.js";
 import { localStorageModeKey } from "../constants.js";
 import { AceEditor } from "../editor.js";
 import { setEditorTheme } from "../theme.js";
@@ -133,14 +134,16 @@ export function renderExpressionContent(mode, examples) {
 
 export function renderTabs(mode, examples) {
   const { tabs } = mode;
-
   const holderElement = document.getElementById("tab");
   holderElement.innerHTML = "";
+
   const divParent = document.createElement("div");
   divParent.className = "tabs";
   divParent.id = "tabs";
   divParent.setAttribute("data-tab-active", 0);
   divParent.setAttribute("data-tab-length", tabs.length);
+  const divWrapper = document.createElement("div");
+  divWrapper.className = "tabs__wrapper";
 
   document.querySelectorAll(dataEditorInputClassNames)?.forEach((editor) => {
     editor.remove();
@@ -160,7 +163,35 @@ export function renderTabs(mode, examples) {
     const tabButton = document.createElement("button");
     tabButton.innerHTML = `<span>${tab.name}</span>`;
     tabButton.className = "tabs-button";
-    tabButton.title = tab.name;
+    const tabButtonWithTooltip = createTooltip({
+      contentText: tab.name,
+      triggerElement: tabButton,
+      onMouseOver() {
+        const divParentStyles = divParent
+          .getAttribute("style")
+          ?.split(";")
+          .filter((style) => !style.includes("--hovered-tab"))
+          .filter(Boolean)
+          .join(";")
+          .trim();
+
+        divParent.setAttribute(
+          "style",
+          `--hovered-tab: ${idx}; ${divParentStyles ?? ""}`
+        );
+      },
+      onMouseLeave() {
+        const divParentStyles = divParent
+          .getAttribute("style")
+          ?.split(";")
+          .filter((style) => !style.includes("--hovered-tab"))
+          .filter(Boolean)
+          .join(";")
+          .trim();
+
+        divParent.setAttribute("style", `${divParentStyles ?? ""}`);
+      },
+    });
 
     tabButton.onclick = () => {
       document
@@ -173,13 +204,26 @@ export function renderTabs(mode, examples) {
       allButtons.forEach(removeActiveClass);
       if (tabButton.classList.contains("active")) removeActiveClass(tabButton);
       else addActiveClass(tabButton);
-      divParent.setAttribute("style", `--current-tab: ${idx}`);
+
+      const divParentStyles = divParent
+        .getAttribute("style")
+        ?.split(";")
+        .filter((style) => !style.includes("--current-tab"))
+        .filter(Boolean)
+        .join(";")
+        .trim();
+
+      divParent.setAttribute(
+        "style",
+        `--current-tab: ${idx}; ${divParentStyles ?? ""}`
+      );
       divParent.setAttribute("data-tab-active", idx);
     };
+
     if (idx === 0) addActiveClass(tabButton);
-    divParent.appendChild(tabButton);
+    divWrapper.appendChild(tabButtonWithTooltip);
   });
-
+  divParent.appendChild(divWrapper);
   holderElement.appendChild(divParent);
   handleFillTabContent(mode, examples[0]);
 

diff --git a/web/index.html b/web/index.html
@@ -193,10 +193,9 @@
               >
                 <div style="display: flex; align-items: center; gap: 1rem">
                   <div class="tooltip__container">
-                    <i id="tooltip__trigger" class="ph-fill ph-info icon"></i>
+                    <i class="ph-fill ph-info icon tooltip__trigger"></i>
                     <div
-                      id="tooltip__content"
-                      class="tooltip"
+                      class="tooltip tooltip__content"
                       style="left: 0; top: 50px"
                     >
                       <span class="tooltip__content--text"
@@ -238,12 +237,9 @@
                         href="https://kubernetes.io/docs/reference/using-api/cel/#resource-constraints"
                         target="_blank"
                         referrerpolicy="no-referrer"
-                        ><i
-                          id="tooltip__trigger"
-                          class="ph-fill ph-info icon"
-                        ></i
+                        ><i class="ph-fill ph-info icon tooltip__trigger"></i
                       ></a>
-                      <div id="tooltip__content" class="tooltip">
+                      <div class="tooltip tooltip__content">
                         <span class="tooltip__content--text"
                           >Click to see more about costs.</span
                         >