From 6fa3babac982061f161728b018c91414961c0d19 Mon Sep 17 00:00:00 2001 From: joaovictor3g Date: Wed, 24 Apr 2024 19:45:10 -0300 Subject: [PATCH] adds tooltip in tabs --- web/assets/css/tabs.css | 20 +++++--- web/assets/js/components/tooltips/index.js | 41 ++++++++++++++-- web/assets/js/utils/render-functions.js | 54 ++++++++++++++++++++-- web/index.html | 12 ++--- 4 files changed, 103 insertions(+), 24 deletions(-) diff --git a/web/assets/css/tabs.css b/web/assets/css/tabs.css index 436495b..0e4bfe5 100644 --- 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 index 3645125..35d8bbd 100644 --- 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 index 47bdd63..20c6db2 100644 --- 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 = `${tab.name}`; 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 index a32e78e..d6cc7dd 100644 --- a/web/index.html +++ b/web/index.html @@ -193,10 +193,9 @@ >
- +
-
+
Click to see more about costs.