Tooltip + dev=true

tooltip/tooltip.js

@@ -0,0 +1,59 @@
+function idmShowTooltip(tooltipEl){
+  const tooltipContentEl = tooltipEl.querySelector(".idm_tooltip__content");
+  if(!tooltipContentEl) return;
+  
+  tooltipContentEl.classList.add("--visible");
+  
+  // Logika pokazywania się i chowania tooltipa
+  let timeoutVar;
+  
+  function onMouseLeave() {
+    timeoutVar = idmHideTooltipTimer(tooltipEl);
+  }
+
+  function onMouseEnter() {
+    clearTimeout(timeoutVar);
+  }
+
+  function onScroll() {
+    idmHideTooltip(tooltipEl);
+  }
+
+  // Store references for later removal
+  tooltipEl._onMouseLeave = onMouseLeave;
+  tooltipEl._onMouseEnter = onMouseEnter;
+  tooltipEl._onScroll = onScroll;
+
+  tooltipEl.addEventListener("mouseleave", onMouseLeave);
+  tooltipEl.addEventListener("mouseenter", onMouseEnter);
+  document.addEventListener("scroll", onScroll);
+}
+
+function idmHideTooltipTimer(tooltipEl){
+  return setTimeout(() => idmHideTooltip(tooltipEl), 1500);
+}
+function idmHideTooltip(tooltipEl){
+  const tooltipContentEl = tooltipEl.querySelector(".idm_tooltip__content");
+  if (!tooltipContentEl) return;
+
+  tooltipContentEl.classList.remove("--visible");
+
+  tooltipEl.removeEventListener("mouseleave", tooltipEl._onMouseLeave);
+  tooltipEl.removeEventListener("mouseenter", tooltipEl._onMouseEnter);
+  document.removeEventListener("scroll", tooltipEl._onScroll);
+
+  delete tooltipEl._onMouseLeave;
+  delete tooltipEl._onMouseEnter;
+  delete tooltipEl._onScroll;
+}
+
+
+document.addEventListener("DOMContentLoaded", ()=>{
+  document.body.addEventListener("click", e=>{
+    const tooltipEl = e.target.closest(".idm_tooltip");
+    if(!e.target.closest(".idm_tooltip__info_icon") || !tooltipEl) return;
+    
+    e.preventDefault();
+    idmShowTooltip(tooltipEl);
+  });
+});