swiperScrollbar + omnibusTooltip

README.md

@@ -3,6 +3,8 @@ Funkcje js składające się na customowe ramki rekomendacji
 
 ## UWAGI PRZEDWDROŻENIOWE ##
 - kod zawiera **app_shop.fn.idmGetOmnibusDetails** który jest przerobionym kodem idosella app_shop.fn.getOmnibusDetails używanym w zwykłych ramkach rekomendacji
+- kod zawiera FrontendComponents/helper-functions/tooltip i FrontendComponents/helper-functions/swiper-scrollbar
+- kod używa naszego idmSetHeight, ale jest to wstawione jako metoda klasowa, nie jako coś osobnego.
 
 ### Pliki ###
 - **style.css** - style wstawiane do css
@@ -54,8 +56,9 @@ Warto gdzieś później zapisać nową nazwę klasy np w opisie komponentu, albo
 - Wystąpił błąd z inicjalizacją. Proszę odśwież stronę
 - Nie znaleziono kontenera
 - Nie znaleziono metody graphql
+- Najniższa cena
 
-#### Przykład ####
+#### Przykłady UŻYCIA ####
 ##### Jedna ramka - obiekt ######
 ```
 new IdmHotspot({
@@ -100,6 +103,8 @@ new IdmHotspot({
  *    - false = nieaktywny
  *    - object = konfiguracja Swiper
  * @property {Function} options.callbackFn - Funkcja callback która dzieje się po wywołaniu wszystkiego włącznie ze swiperem
+ * @property {boolean} options.swiperScrollbar - Czy włączać scrollbar w swiperze - DO DZIAŁANIA WYMAGA WŁĄCZONEGO SWIPERA
+ * @property {boolean} options.omnibusTooltip - Czy wyświetlać omnibusa w formie tooltip
  * 
  * @type {Hotspot[]}
  */
@@ -125,6 +130,8 @@ new IdmHotspot({
     idmInsertHotspotElement(document.getElementByid("idmBlogHotspot1"));
  </script>
 ```
+
+Żeby zmienić resztę ustawień trzeba zmieniać defaultowe ustawienia!
 #### Wszystkie możliwe dane HTML ####
 ```
 /**

klasa.js

@@ -8,6 +8,8 @@ const idmHotspotTextObject = {
   [<iai:variable vid="Bestseller"/>]: <iai:variable vid="Bestseller"/>,
   [<iai:variable vid="Nowość"/>]: <iai:variable vid="Nowość"/>,
   [<iai:variable vid="Ilość"/>]: <iai:variable vid="Ilość"/>,
+  [<iai:variable vid="Najniższa cena"/>]: <iai:variable vid="Najniższa cena"/>,
+  [<iai:variable vid="Najniższa cena z 30 dni przed obniżką"/>]: <iai:variable vid="Najniższa cena z 30 dni przed obniżką"/>,
   [<iai:variable vid="Zwiększ ilość"/>]: <iai:variable vid="Zwiększ ilość"/>,
   [<iai:variable vid="Zmniejsz ilość"/>]: <iai:variable vid="Zmniejsz ilość"/>,
   [<iai:variable vid="Najniższa cena produktu w okresie 30 dni przed wprowadzeniem obniżki"/>]: <iai:variable vid="Najniższa cena produktu w okresie 30 dni przed wprowadzeniem obniżki"/>,
@@ -278,7 +280,7 @@ app_shop.fn.idmGetOmnibusDetails = (options) => {
   // Aktywny kod rabatowy
   if (app_shop.vars.omnibus?.rebateCodeActivate && sizeData.price?.rebateCodeActive) {
     classes.add.push('--omnibus-code');
-    activeLabel.rebateCodeActive = `<span class="label --code --omnibus">${idmHotspotTextObject["Kod rabatowy"]}</span>`;
+    activeLabel.rebateCodeActive = `<span class="label --code --omnibus">${omnibusDetailsTxt?.['Kod rabatowy']}</span>`;
     classes.remove = classes.remove.filter((item) => item !== '--omnibus-code');
   }
   // Skrócona wersja omnibusa, gdy aktywny kod rabatowy
@@ -301,19 +303,13 @@ app_shop.fn.idmGetOmnibusDetails = (options) => {
   }
   // label okazja
   if ((!higher || newDate) && !activeLabel?.rebateCodeActive) {
-    activeLabel.bargain = `<span class="label --bargain --omnibus">${idmHotspotTextObject["Okazja"]}</span>`;
+    activeLabel.bargain = `<span class="label --bargain --omnibus">${omnibusDetailsTxt?.['Okazja']}</span>`;
   }
   // label promocja
   if (Object.keys(activeLabel)?.length === 0) {
-    activeLabel.bargain = `<span class="label --promo --omnibus">${idmHotspotTextObject["Promocja"]}</span>`;
+    activeLabel.bargain = `<span class="label --promo --omnibus">${omnibusDetailsTxt?.['Promocja']}</span>`;
   }
 
-  // // labele zones
-  // if(productData.zones.find(zone => zone ==="bestseller")) activeLabel.bestseller = `<span class="label --bestseller --omnibus">${idmHotspotTextObject["Bestseller"]}</span>`;
-  // if(productData.zones.find(zone => zone ==="news")) activeLabel.news = `<span class="label --news --omnibus">${idmHotspotTextObject["Nowość"]}</span>`;
-
-
-
   let omnibusPercentSign = '';
   if (higher) {
     omnibusPercentSign = '-';
@@ -325,7 +321,7 @@ app_shop.fn.idmGetOmnibusDetails = (options) => {
     price: omnibusPrice,
     visible: true,
     percent: omnibusPercent,
-    html: `<span class="omnibus_price__text">${idmHotspotTextObject['Najniższa cena produktu w okresie 30 dni przed wprowadzeniem obniżki']}: </span><del class="omnibus_price__value">${omnibusPrice}</del><span class="price_percent">${omnibusPercent}</span>`,
+    html: `<span class="omnibus_price__text">${omnibusDetailsTxt['Najniższa cena produktu w okresie 30 dni przed wprowadzeniem obniżki']}: </span><del class="omnibus_price__value">${omnibusPrice}</del><span class="price_percent">${omnibusPercent}</span>`,
   };
 
   const max = (maxPrice) ? {
@@ -333,7 +329,7 @@ app_shop.fn.idmGetOmnibusDetails = (options) => {
       price: maxPrice,
       visible: true,
       percent: `-${sizeData.price.youSavePercent}%`,
-      html: `<span class="omnibus_label">${idmHotspotTextObject['Cena regularna']}: </span>
+      html: `<span class="omnibus_label">${omnibusDetailsTxt['Cena regularna']}: </span>
         <del>${maxPrice}</del><span class="price_percent">-${sizeData.price.youSavePercent}%</span>`,
     },
   } : {};
@@ -343,7 +339,7 @@ app_shop.fn.idmGetOmnibusDetails = (options) => {
       price: beforeRebatePrice,
       visible: !!classes.add.includes('--omnibus-code'),
       percent: `-${sizeData.price.beforeRebateDetails?.youSavePercent}%`,
-      html: `<span class="omnibus_label">${idmHotspotTextObject['Cena bez kodu']}: </span>
+      html: `<span class="omnibus_label">${omnibusDetailsTxt['Cena bez kodu']}: </span>
         <del>${beforeRebatePrice}</del>
         <span class="price_percent">-${sizeData.price.beforeRebateDetails?.youSavePercent}%</span>`,
     },
@@ -354,12 +350,17 @@ app_shop.fn.idmGetOmnibusDetails = (options) => {
       date: newDate,
       price: maxPrice,
       visible: !!classes.add.includes('--omnibus-new-price'),
-      html: `<span class="omnibus_label">${idmHotspotTextObject['Cena nadchodząca od']} </span>
+      html: `<span class="omnibus_label">${omnibusDetailsTxt['Cena nadchodząca od']} </span>
         <span class="new_price__date">${newDate}: </span>
         <span class="new_price__value">${maxPrice}</span>`,
     },
   } : {};
-
+  const omnibusLabel = {
+    omnibusLabel: {
+      name: Object.keys(activeLabel)?.[0] || '',
+      html: activeLabel[Object.keys(activeLabel)?.[0]],
+    },
+  };
 
   return {
     classes,
@@ -367,7 +368,7 @@ app_shop.fn.idmGetOmnibusDetails = (options) => {
     ...max,
     ...beforeRebate,
     ...newPriceEffectiveUntil,
-    activeLabel,
+    ...omnibusLabel,
   };
 };
 
@@ -409,7 +410,9 @@ class IdmHotspot{
           lazy: true,
           addToBasket: true, // true, false, "range"
           swiper: true,
-          callbackFn: ()=>{}
+          callbackFn: ()=>{},
+          swiperScrollbar: false,
+          omnibusTooltip: false,
       }
   }
   /**
@@ -523,7 +526,7 @@ class IdmHotspot{
    */
   markupProduct(prod){
       // IDM DO POPRAWKI
-      const prodExchangedData = app_shop.fn?.idmGetOmnibusDetails({productData: prod});
+      const prodExchangedData = app_shop?.fn?.getOmnibusDetails?.({productData: prod}) || app_shop.fn?.idmGetOmnibusDetails({productData: prod});
 
       // markup pojedynczego produktu
       let singleMarkup = "";
@@ -611,11 +614,39 @@ class IdmHotspot{
           ${price.value === 0 ? `<a class="price --phone" href="/contact.php" tabindex="-1" title="${idmHotspotTextObject["Kliknij, by przejść do formularza kontaktu"]}">${idmHotspotTextObject["Cena na telefon"]}</a>` : ""}
           ${prodExchangedData?.beforeRebate?.visible ? `<span class="price --before-rebate">${prodExchangedData?.beforeRebate?.html}</span>` : ""}
           ${prodExchangedData?.newPriceEffectiveUntil?.visible ? `<span class="price --new-price new_price">${prodExchangedData?.newPriceEffectiveUntil?.html}</span>` : ""}
-          ${prodExchangedData?.omnibus?.visible ? `<span class="price --omnibus omnibus_price">${prodExchangedData?.omnibus?.html}</span>` : ""}
+          ${this.markupOmnibus(prodExchangedData?.omnibus)}
           ${prodExchangedData?.max?.visible ? `<span class="price --max">${prodExchangedData?.max?.html}</span>` : ""}
       `;
   }
 
+  /** 
+   * Tworzy znacznik HTML dla omnibusa.
+    * 
+    * @param  {object} omnibus - dane omnibusa
+    * @param  {string} omnibus.html - kod html zwykłego omnibusa
+    * @param  {string} omnibus.percent - % przeceny omnibusa
+    * @param  {string} omnibus.price - cena omnibusa
+    * @param  {boolean} omnibus.visible - czy omnibus jest widoczny
+    * @returns {string} Zwraca HTML dla sekcji omnibusa lub pusty string, jeśli niewidoczny.
+  */
+  
+  markupOmnibus(omnibus){
+    if(!omnibus?.visible) return "";
+
+    if(!this.options.omnibusTooltip) return `<span class="price --omnibus omnibus_price">${omnibus?.html}</span>`;
+    else return `
+      <span class="price --omnibus omnibus_price">
+        <span class="omnibus_price__text">${idmHotspotTextObject[<iai:variable vid="Najniższa cena"/>]}:</span>
+        <del class="omnibus_price__value">${omnibus.price}</del>
+        <span class="price_percent">${omnibus.percent}</span>
+        <span class="idm_tooltip">
+          <span class="idm_tooltip__info_icon"></span>
+            <p class="idm_tooltip__content --one-line">${idmHotspotTextObject[<iai:variable vid="Najniższa cena z 30 dni przed obniżką"/>]}</p>
+          </span>
+      </span>
+    `;
+  }
+
   markupAddToBasket(prod){
       let markup = "";
       if(!this.options.addToBasket) return markup;
@@ -847,7 +878,7 @@ class IdmHotspot{
     if (selector) adjustAllHeights(selector)
     if (selectors?.length) selectors.forEach(adjustAllHeights)
   }
-   // ========================================================
+  // ========================================================
   // INICJALIZACJA
   // ========================================================
 
@@ -929,6 +960,8 @@ class IdmHotspot{
           options: this.options.swiper,
         });
         await selectedSwiper.init();
+        
+        if(this.options.swiperScrollbar) new IdmSwiperProgress(selectedSwiper, `#${this.id} .swiper`);
       }
     }catch(err){
       console.error(idmHotspotTextObject["Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"], err);
@@ -945,7 +978,7 @@ class IdmHotspot{
   }
   initSingleEvent(prodEl){
     // DODAWANIE DO KOSZYKA
-    if(this?.options?.addToBasket){
+    if(this.options?.addToBasket){
       const addToBasketEl = prodEl.querySelector("form.add_to_basket");
       if(!addToBasketEl) return;
       addToBasketEl.addEventListener("submit", this.handleAddToBasket);
@@ -956,6 +989,14 @@ class IdmHotspot{
         addToBasketEl.querySelector(".idm-products-banner__qty-input")?.addEventListener("input",this.handleQuantityInputChange);
       }
     }
+    // Tooltip
+    if(this.options?.omnibusTooltip){
+      const tooltipEl = prodEl.querySelector(".idm_tooltip");
+
+      tooltipEl.addEventListener("click", ()=>{
+        this.showTooltip(tooltipEl);
+      })
+    }
   }
 
   /**
@@ -981,6 +1022,178 @@ class IdmHotspot{
   }
 }
 
+/*
+==============================================================
+ SWIPER PASEK
+==============================================================
+*/
+
+class IdmSwiperProgress {
+constructor(swiper, selector) {
+  this.swiper = swiper?.slider?.slider ?? swiper?.slider ?? swiper;
+  this.selector = selector;
+  this.scrollbarEl = null;
+  this.progressEl = null;
+  this.isDragging = false;
+
+  this.init();
+}
+
+init() {
+  const el = document.querySelector(this.selector);
+  if (!el || el.querySelector(".idm-scrollbar")) return;
+
+  el.insertAdjacentHTML(
+    "beforeend",
+    `<div class="idm-scrollbar swiper-scrollbar"><div class="idm-progress"></div></div>`
+  );
+
+  this.scrollbarEl = el.querySelector(".idm-scrollbar");
+  this.progressEl = this.scrollbarEl.querySelector(".idm-progress");
+
+  this.updateBarWidth();
+  this.addDragTracking();
+
+  this.swiper.on("progress", () => this.updateProgress());
+  this.swiper.on("breakpoint", () => {this.updateBarWidth()});
+}
+
+updateBarWidth() {
+  const { slidesPerGroup, slidesPerView } = this.swiper.params;
+  const totalSlides = this.swiper.slides.length;
+
+  const progressWidth = 100 / (((totalSlides - slidesPerView) / slidesPerGroup) + 1);
+  this.progressEl.style.width = `${progressWidth}%`;
+
+  if (progressWidth >= 100 || progressWidth <= 0) this.scrollbarEl.style.display = "none";
+  else this.scrollbarEl.style.display = "";
+}
+
+updateProgress() {
+  const progress = this.swiper.progress;
+  const { slidesPerGroup, slidesPerView } = this.swiper.params;
+  const totalSlides = this.swiper.slides.length;
+
+  const progressWidth = 100 / (((totalSlides - slidesPerView) / slidesPerGroup) + 1);
+  const newLeft = (100 - progressWidth) * progress;
+  this.progressEl.style.left = `${Math.min(
+    100 - progressWidth,
+    Math.max(0, newLeft)
+  )}%`;
+}
+
+addDragTracking() {
+  const handle = this.progressEl;
+  let grabOffset = 0;
+  let scrollbarWidth = 0;
+  let handleWidth = 0;
+
+  const startDrag = (e) => {
+    this.isDragging = true;
+    this.scrollbarEl.classList.add("--drag-start");
+
+    const rect = this.scrollbarEl.getBoundingClientRect();
+    const handleRect = handle.getBoundingClientRect();
+    scrollbarWidth = rect.width;
+    handleWidth = handleRect.width;
+
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+    grabOffset = clientX - handleRect.left;
+
+    document.addEventListener("mousemove", handleDrag);
+    document.addEventListener("mouseup", stopDrag);
+    document.addEventListener("touchmove", handleDrag);
+    document.addEventListener("touchend", stopDrag);
+  };
+
+  const handleDrag = (e) => {
+    if (!this.isDragging) return;
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+    const rect = this.scrollbarEl.getBoundingClientRect();
+    let newLeftPx = clientX - rect.left - grabOffset;
+    const maxLeft = scrollbarWidth - handleWidth;
+    newLeftPx = Math.max(0, Math.min(maxLeft, newLeftPx));
+    const progress = newLeftPx / maxLeft;
+    this.swiper.setProgress(progress, 0);
+  };
+
+  const stopDrag = () => {
+    if (!this.isDragging) return;
+    this.isDragging = false;
+    document.removeEventListener("mousemove", handleDrag);
+    document.removeEventListener("mouseup", stopDrag);
+    document.removeEventListener("touchmove", handleDrag);
+    document.removeEventListener("touchend", stopDrag);
+    this.scrollbarEl.classList.remove("--drag-start");
+    this.swiper.slideReset(400);
+  };
+
+  handle.addEventListener("mousedown", startDrag);
+  handle.addEventListener("touchstart", startDrag);
+}
+}
+// ========================================================
+// TOOLTIP
+// ========================================================
+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);
+  });
+});
 // new IdmHotspot({
 //   id: "idmTestHotspot1",
 //   title: "tescik",
@@ -1031,8 +1244,6 @@ async function idmPrepareHotspotObject(selectedContainerEl){
 
   if(selectedContainerEl?.dataset?.lazy) idmHotspotObj.options = {lazy: selectedContainerEl?.dataset?.lazy === "true" ? true : false};
 
-
-  
   new IdmHotspot(idmHotspotObj)
 }
 

ramka.txt

@@ -1,12 +1,11 @@
 1. Ramka
 
-
-- ulubione? + porównywarka? (wymagają zmiany w komponencie idosella)
-- zakres cen?????????????
 - wybór rozmiaru/wersji??
-- Wybór kolorystyczny
+- ulubione? + porównywarka? (wymagają zmiany w komponencie idosella)
+
+- zakres cen?????????????
+- Wybór kolorystyczny???
 - AAAAA - banner na hotspocie
-- Pasek jak na Pasiastym Parzystnokopytnym Kosmetyku
 
 
 
@@ -16,13 +15,3 @@
 Stara ramka
 - getProductXML=t
 - slick
-
-
-bramka z hotspots jeszcze nie działa bad request
-
-
-
-Get-Content 1graphQL.js,2funkcje.js,3markup.js,4init.js,5ainsertHotspotHTML.js,5binsertHotspotObject.js | Set-Content bundle.js
-
-
-Get-Content sklad/1graphQL.js,sklad/2funkcje.js,sklad/3markup.js,sklad/4init.js,sklad/5ainsertHotspotHTML.js,sklad/5binsertHotspotObject.js | Set-Content bundle.js

style.css

@@ -1,56 +0,0 @@
-.idm__hotspot .add_to_basket{
-  display: flex;
-}
-.idm__hotspot .add_to_basket.--range{
-  flex-direction: column;
-}
-.idm__hotspot .idm-products-banner__qty{
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  align-items: center;
-  gap: 1rem;
-}
-.idm__hotspot .idm-products-banner__qty-input{
-  height: 3rem;
-  text-align: center;
-  border: 1px solid #ccc;
-  width: 60%;
-  max-width: unset;
-  min-width: unset;
-}
-.idm__hotspot .idm-products-banner__qty button{
-  background: #000;
-  height: 3rem;
-  width: 3rem;
-  color: #fff;
-  border-radius: 0.5rem;
-  min-width: 3rem;
-}
-  @keyframes idm-skeleton-loading {
-      to {
-          background-position-x: -200%;
-      }
-  }
-.idm__hotspot.idm-loading{
-  position: relative;
-  overflow: hidden;
-
-  transition: none;
-  border-radius: 8px;
-  background: #eee;
-  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
-  background-size: 200% 100%;
-  animation: 1.5s idm-skeleton-loading linear infinite;
-  width: 100%;
-  height: 50rem;
-}
-.idm__hotspot.idm-loading .hotspot{
-  opacity: 0;
-}
-@media (max-width: 756px) {
-  .idm__hotspot.idm-loading{
-    width: 100%;
-    height: 50rem;
-  }
-}

style.less

@@ -0,0 +1,125 @@
+.idm__hotspot .add_to_basket{
+  display: flex;
+}
+.idm__hotspot .add_to_basket.--range{
+  flex-direction: column;
+}
+.idm__hotspot .idm-products-banner__qty{
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+  gap: 1rem;
+}
+.idm__hotspot .idm-products-banner__qty-input{
+  height: 3rem;
+  text-align: center;
+  border: 1px solid #ccc;
+  width: 60%;
+  max-width: unset;
+  min-width: unset;
+}
+.idm__hotspot .idm-products-banner__qty button{
+  background: #000;
+  height: 3rem;
+  width: 3rem;
+  color: #fff;
+  border-radius: 0.5rem;
+  min-width: 3rem;
+}
+  @keyframes idm-skeleton-loading {
+      to {
+          background-position-x: -200%;
+      }
+  }
+.idm__hotspot.idm-loading{
+  position: relative;
+  overflow: hidden;
+
+  transition: none;
+  border-radius: 8px;
+  background: #eee;
+  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+  background-size: 200% 100%;
+  animation: 1.5s idm-skeleton-loading linear infinite;
+  width: 100%;
+  height: 50rem;
+}
+.idm__hotspot.idm-loading .hotspot{
+  opacity: 0;
+}
+@media (max-width: 756px) {
+  .idm__hotspot.idm-loading{
+    width: 100%;
+    height: 50rem;
+  }
+}
+
+/* SWIPER PROGRESS */
+.idm-scrollbar{
+    flex: 1;
+    height: 2px!important;
+    position: relative!important;
+    margin-top: 2rem;
+    cursor: grab;
+}
+.idm-scrollbar.--drag-start .idm-progress{
+    transition: none;
+}
+.idm-progress{
+    position: absolute;
+    z-index: 10;
+    height: calc(100% + 2px);
+    background-color: #0d0d0d;
+    left: 0;
+    top: -1px;
+    transition: all 0.3s;
+    border-radius: 5px;
+}
+
+
+
+/* tooltip */
+.idm_tooltip{
+  --tooltip-background: #111;
+  --tooltip-border: #999;
+  --tooltip-color: #fff;
+  
+  position: relative;
+  &__info_icon{
+    color: var(--tooltip-border);
+    display: inline-block;
+    &: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;
+    }
+  }
+}