Zabezpieczenie kodu tooltipa

klasa.js

@@ -191,6 +191,7 @@ const IDM_PRODUCT_QUERY = `id
           iconSecond
           iconSmall
           iconSmallSecond
+          link
         }
       }
       opinion{
@@ -597,6 +598,7 @@ class IdmHotspot{
             </strong>
           </a>
           <div class="product__content_wrapper">
+            ${this.markupVersions(prod)}
             ${this.markupOpinions(prod)}
             <a class="product__name" tabindex="0" href="${prod.link}" title="${prod.name}">${prod.name}</a>
             <div class="product__prices mb-auto ${prodExchangedData?.classes?.add?.reduce((acc,val) => acc + " " + val,"")}">
@@ -634,6 +636,16 @@ class IdmHotspot{
       </span>`;
   }
 
+  markupVersions(prod){
+    if(!this.options?.selectVersion || !prod.group?.versions || prod.group?.versions?.length === 1 ) return "";
+
+    return `<div class="product__versions">
+      ${prod.group.versions.reduce((acc, val)=>{
+        return acc + `<a class="product__version_single" href="${val.link}"><img class="product__version_img" src="${val.icon}" alt="${val.name}"/></a>`;
+      },"")}
+    </div>`
+  }
+  
   markupImage(prod){
       let markup = "";
       if(prod.iconSmallSecond && prod.iconSecond) markup +=`<picture>
@@ -1407,7 +1419,7 @@ function idmHideTooltip(tooltipEl){
 }
 
 
-// document.addEventListener("DOMContentLoaded", ()=>{
+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;
@@ -1415,7 +1427,7 @@ function idmHideTooltip(tooltipEl){
     e.preventDefault();
     idmShowTooltip(tooltipEl);
   });
-// });
+});
 // new IdmHotspot({
 //   id: "idmTestHotspot1",
 //   title: "tescik",

style.less

@@ -227,3 +227,33 @@
     }
   }
 }
+
+
+// WERSJE
+.idm__hotspot:has(.product__versions){
+  .product__versions{
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 1rem;
+    z-index: 1;
+    background: #fff;
+    clip-path: inset(0% 0 100% 0);
+    padding: 0.3rem 1rem;
+    position: absolute;
+    top: 0;
+  }
+  .product__content_wrapper{
+    position: relative;
+  }
+  .label_icons, .product__versions{
+    transition: all 0.2s;
+  }
+  .product:hover{
+    .product__versions, .label_icons{
+      transform: translateY(-100%);
+    }
+    .product__versions{
+      clip-path: inset(0 0 0 0);
+    }
+  }
+}