Tooltip + dev=true

devTrue/README.md

@@ -0,0 +1,7 @@
+# DEV=TRUE #
+It's a short code to make your code safe to check on production, without people visiting the site seeing it
+
+## USE ##
+Put code, or function call inside dev=true code, and then you can check it by adding ?dev=true to your url.(&dev=true if there already is ? in your url) 
+
+Created by • **[IdoMods](https://idomods.pl/)** • 2025

devTrue/dev.js

@@ -0,0 +1,9 @@
+{
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+    const dev = urlParams.get('dev')
+    if(dev == 'true'){
+        // INSERT YOUR CODE HERE
+
+    }
+}

tooltip/index.html

@@ -0,0 +1,4 @@
+<span class="idm_tooltip">
+    <span class="idm_tooltip__info_icon"></span>
+    <p class="idm_tooltip__content --one-line">Najniższa cena z 30 dni przed obniżką</p>
+</span>

tooltip/readme.md

@@ -0,0 +1,8 @@
+# Customowy tooltip #
+Functions and styles for custom tooltip
+
+## Usage ##
+Put JS code and CSS inside your tooltip component. Then you only need to put div with right structure like with index.html
+
+
+Created by • **[IdoMods](https://idomods.pl/)** • 2025

tooltip/style.css

@@ -0,0 +1,42 @@
+.idm_tooltip{
+  --tooltip-background: #111;
+  --tooltip-border: #999;
+  --tooltip-color: #fff;
+  
+  position: relative;
+  &__info_icon{
+    color: var(--tooltip-border);
+    &:before{
+      content: "";
+      display: block;
+      width: 1.2rem;
+      height: 1.2rem;
+      margin-left: 0.5rem;
+      cursor: pointer;
+      vertical-align: bottom;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='idm_tooltip__info_icon' viewBox='0 0 16 16'%3E%3Cpath d='M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14.667A6.667,6.667,0,1,1,14.667,8,6.667,6.667,0,0,1,8,14.667Z' fill='currentColor'%3E%3C/path%3E%3Cpath d='M11.333,10h-.667a.667.667,0,1,0,0,1.333h.667v4a.667.667,0,0,0,1.333,0v-4A1.333,1.333,0,0,0,11.333,10Z' transform='translate(-3.333 -3.333)' fill='currentColor'%3E%3C/path%3E%3Ccircle cx='1' cy='1' r='1' transform='translate(7 3.333)' fill='currentColor'%3E%3C/circle%3E%3C/svg%3E");
+      background-size: cover;
+    }
+  }
+  &__content{
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    border-radius: 5px;
+    background: var(--tooltip-background);
+    color: var(--tooltip-color);
+    border: 1px solid var(--tooltip-border);
+    bottom: 150%;
+    padding: 0.5rem 1rem;
+    @media @tablet{
+      &.--one-line{
+        white-space: nowrap;
+      }
+    }
+    &.--visible{
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}

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);
+  });
+});