@erain20029/tooltips 2.0.116 → 2.0.117

package/dist/tooltip-overlay.umd.js

@@ -1,4 +1,4 @@
-(function(f){typeof define=="function"&&define.amd?define(f):f()})((function(){"use strict";const f=".tooltip-overlay{position:fixed;z-index:9999;pointer-events:none;background:#53616e;border-radius:8px;box-shadow:0 4px 20px #00000040;color:#dadadb;min-width:45px;max-width:300px;overflow:visible}.tooltip-overlay.with-image{max-width:384px}.tooltip-card{display:flex;align-items:center;gap:16px;padding:10px;box-sizing:border-box}.tooltip-image{width:80px;height:80px;border-radius:8px;object-fit:cover}.tooltip-text{flex:1;color:#fff}.tooltip-title{font-weight:300;line-height:1.3}.tooltip-desc{margin-top:8px;line-height:1.5;font-weight:300;letter-spacing:.2px;overflow-wrap:break-word}.tooltip-arrow .icon{width:40px;height:40px;position:absolute}.tooltip-arrow.left_top .icon{top:-25px;left:6px}.tooltip-arrow.left_bottom .icon{bottom:-25px;left:5px;transform:rotate(180deg)}.tooltip-arrow.right_bottom .icon{bottom:-25px;right:10px;transform:rotate(180deg)}.tooltip-arrow.right_top .icon{top:-25px;right:10px}";(function(){function v(){if(document.getElementById("tooltip-overlay-styles"))return;const i=document.createElement("style");i.id="tooltip-overlay-styles",i.textContent=f,document.head.appendChild(i)}let d=null,u=null,m=[],g=!1;function y(i){const t=i.getBoundingClientRect(),e=window.innerWidth,l=window.innerHeight,n=t.left+t.width/2,o=t.top+t.height/2;return{coordinates:{x:t.left,y:t.top,width:t.width,height:t.height},position:{horizontal:n<e/2?"left":"right",vertical:o<l/2?"top":"bottom"}}}function b(i,t){if(!i)return{titleSize:16,descriptionSize:12};let e=16,l=12,n="left",o="left";switch(i.title){case"small":e=16,n="left";break;case"medium":e=18;break;case"large":e=22;break}switch(i.description){case"small":l=12;break;case"medium":l=14;break;case"large":l=16;break}switch(t.title){case"left":n="left";break;case"center":n="center";break;case"right":n="right";break}switch(t.description){case"left":o="left";break;case"center":o="center";break;case"right":o="right";break}return{titleSize:e,descriptionSize:l,titleAlign:n,descriptionAlign:o}}function x(){d&&(d.remove(),d=null,u=null)}async function T(){if(g)return;const i=localStorage.getItem("product");if(!i)return;const t=JSON.parse(i).id,e=document.createElement("script");if(e.type="module",e.src=`http://localhost:3000/documentation/${t}/tooltip.js`,await new Promise((n,o)=>{e.onload=n,e.onerror=o,document.head.appendChild(e)}),typeof window.tooltipGetter!="function")return;const l=await window.tooltipGetter();m=Array.isArray(l)?l:[],g=!0}function S(i,t){x(),v();const e=document.createElement("div");e.className="tooltip-overlay",e.style.left="-9999px",e.style.top="-9999px",t.image&&e.classList.add("with-image");const l=`http://localhost:3000${t.image}`,n=t.image?`<img class="tooltip-image" src="${l}" />`:"";e.innerHTML=`
+(function(p){typeof define=="function"&&define.amd?define(p):p()})((function(){"use strict";const p=".tooltip-overlay{position:fixed;z-index:9999;pointer-events:none;background:#53616e;border-radius:8px;box-shadow:0 4px 20px #00000040;color:#dadadb;min-width:45px;max-width:300px;overflow:visible}.tooltip-overlay.with-image{max-width:384px}.tooltip-card{display:flex;align-items:center;gap:16px;padding:10px;box-sizing:border-box}.tooltip-image{width:80px;height:80px;border-radius:8px;object-fit:cover}.tooltip-text{flex:1;color:#fff}.tooltip-title{font-weight:300;line-height:1.3}.tooltip-desc{margin-top:8px;line-height:1.5;font-weight:300;letter-spacing:.2px;overflow-wrap:break-word}.tooltip-arrow .icon{width:40px;height:40px;position:absolute}.tooltip-arrow.left_top .icon{top:-25px;left:6px}.tooltip-arrow.left_bottom .icon{bottom:-25px;left:5px;transform:rotate(180deg)}.tooltip-arrow.right_bottom .icon{bottom:-25px;right:10px;transform:rotate(180deg)}.tooltip-arrow.right_top .icon{top:-25px;right:10px}";(function(){function m(){if(document.getElementById("tooltip-overlay-styles"))return;const i=document.createElement("style");i.id="tooltip-overlay-styles",i.textContent=p,document.head.appendChild(i)}let a=null,d=null,g=[],h=!1;function x(i){const t=i.getBoundingClientRect(),e=window.innerWidth,o=window.innerHeight,n=t.left+t.width/2,r=t.top+t.height/2;return{coordinates:{x:t.left,y:t.top,width:t.width,height:t.height},position:{horizontal:n<e/2?"left":"right",vertical:r<o/2?"top":"bottom"}}}function w(i,t){if(!i)return{titleSize:16,descriptionSize:12};let e=16,o=12,n="left",r="left";switch(i.title){case"small":e=16,n="left";break;case"medium":e=18;break;case"large":e=22;break}switch(i.description){case"small":o=12;break;case"medium":o=14;break;case"large":o=16;break}switch(t.title){case"left":n="left";break;case"center":n="center";break;case"right":n="right";break}switch(t.description){case"left":r="left";break;case"center":r="center";break;case"right":r="right";break}return{titleSize:e,descriptionSize:o,titleAlign:n,descriptionAlign:r}}function u(){a&&(a.remove(),a=null,d=null)}async function v(){if(h)return;const i=localStorage.getItem("product");if(!i)return;const t=JSON.parse(i).id,e=document.createElement("script");if(e.type="module",e.src=`http://localhost:3000/documentation/${t}/tooltip.js`,await new Promise((n,r)=>{e.onload=n,e.onerror=r,document.head.appendChild(e)}),typeof window.tooltipGetter!="function")return;const o=await window.tooltipGetter();g=Array.isArray(o)?o:[],h=!0}function y(i,t){u(),m();const e=document.createElement("div");e.className="tooltip-overlay",e.style.left="-9999px",e.style.top="-9999px",t.image&&e.classList.add("with-image");const o=`http://localhost:3000${t.image}`,n=t.image?`<img class="tooltip-image" src="${o}" />`:"";e.innerHTML=`
       <div class="tooltip-arrow">
         <div class="icon">
           <svg
@@ -22,4 +22,4 @@
         </div>
         ${t.position?.image==="right"?n:""}
       </div>
-    `,document.body.appendChild(e);const{coordinates:o,position:r}=y(i),a=e.getBoundingClientRect(),p=30;let c=0,s=0;const h=e.querySelector(".tooltip-arrow"),{titleSize:z,descriptionSize:E,titleAlign:L,descriptionAlign:_}=b(t.size,t.position),$=`font-size: ${z}px; text-align: ${L};`,A=`font-size: ${E}px; text-align: ${_};`,O=e.querySelector(".tooltip-title"),P=e.querySelector(".tooltip-desc");if(O.style.cssText=$,P.style.cssText=A,!i)return;const H=i.offsetWidth,w=15,M=r.horizontal==="left"&&r.vertical==="top",B=r.horizontal==="right"&&r.vertical==="top",C=r.horizontal==="left"&&r.vertical==="bottom",G=r.horizontal==="right"&&r.vertical==="bottom";M?(c=o.x,s=o.y+o.height+p,h.classList.add("left_top")):C?(c=o.x,s=o.y-a.height-w,h.classList.add("left_bottom")):B?(c=o.x-a.width+H,s=o.y+o.height+p,h.classList.add("right_top")):G&&(c=o.x-a.width,s=o.y-a.height-w,h.classList.add("right_bottom")),e.style.left=`${Math.max(8,c)}px`,e.style.top=`${Math.max(8,s)}px`,d=e,u=i}function k(i,t){const e=t.selector,l=window.location.host;let n=null,o=null,r=null;const[a,p]=e.split("::sig=");p&&(r=p);const c=a.split("::");if(c.length===2?(n=c[0],o=c[1]):o=a,n&&n!==l)return null;let s=null;try{s=i.matches(o)?i:i.closest(o)}catch{return null}return!s||r&&buildElementSignature(s)!==r?null:s}document.addEventListener("mouseenter",async i=>{if(!(i.target instanceof Element)||i.target.closest(".tooltip-overlay")||(await T(),!g))return;let t=null,e=null;for(const l of m){const n=k(i.target,l);if(n){t=l,e=n;break}}t&&S(e,t)},!0),document.addEventListener("mouseleave",i=>{if(!d||!u)return;const t=i.relatedTarget;t&&!d.contains(t)&&!u.contains(t)&&x()},!0)})()}));
+    `,document.body.appendChild(e);const r=e.querySelector(".tooltip-arrow"),{titleSize:b,descriptionSize:T,titleAlign:$,descriptionAlign:S}=w(t.size,t.position),k=`font-size: ${b}px; text-align: ${$};`,z=`font-size: ${T}px; text-align: ${S};`,L=e.querySelector(".tooltip-title"),_=e.querySelector(".tooltip-desc");if(L.style.cssText=k,_.style.cssText=z,!i)return;const{coordinates:l,position:s}=x(i);i.offsetWidth,e.getBoundingClientRect();let c="";const f=15,E=s.horizontal==="left"&&s.vertical==="top",O=s.horizontal==="right"&&s.vertical==="top",A=s.horizontal==="left"&&s.vertical==="bottom",B=s.horizontal==="right"&&s.vertical==="bottom";E?(c=`left: ${l.x}px; top: ${l.y+l.height+f}px;`,r.classList.add("left_top")):A?(c=`left: ${l.x}px; bottom: ${l.y+l.height+f}px;`,r.classList.add("left_bottom")):O?(c=`right: ${l.x}px; top: ${l.y+l.height+f}px;`,r.classList.add("right_top")):B&&(c=`right: ${l.x}px; bottom: ${l.y+l.height+f}px;`,r.classList.add("right_bottom")),e.style.cssText=c,a=e,d=i}document.addEventListener("mouseenter",async i=>{if(!(i.target instanceof Element)||i.target.closest(".tooltip-overlay")||(await v(),!h))return;const t=g.find(o=>i.target.closest(o.selector));if(!t)return;const e=i.target.closest(t.selector);e&&y(e,t)},!0),document.addEventListener("mouseleave",i=>{if(!a||!d)return;const t=i.relatedTarget;t&&!a.contains(t)&&!d.contains(t)&&u()},!0)})()}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erain20029/tooltips",
-  "version": "2.0.116",
+  "version": "2.0.117",
   "description": "Universal tooltip overlay for any HTML project",
   "license": "MIT",
   "author": "Erik",