@erain20029/tooltips 2.0.121 → 2.0.123
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(c){typeof define=="function"&&define.amd?define(c):c()})((function(){"use strict";const c=".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 o=document.createElement("style");o.id="tooltip-overlay-styles",o.textContent=c,document.head.appendChild(o)}let a=null,p=null,h=[],f=!1;function u(o){const t=o.getBoundingClientRect(),e=window.innerWidth,i=window.innerHeight,n=t.left+t.width/2,r=t.top+t.height/2;return{coordinates:{x:t.left,y:t.top,left:t.left,top:t.top,right:e-t.right,bottom:i-t.bottom,width:t.width,height:t.height},position:{horizontal:n<e/2?"left":"right",vertical:r<i/2?"top":"bottom"}}}function x(o,t){if(!o)return{titleSize:16,descriptionSize:12};let e=16,i=12,n="left",r="left";switch(o.title){case"small":e=16,n="left";break;case"medium":e=18;break;case"large":e=22;break}switch(o.description){case"small":i=12;break;case"medium":i=14;break;case"large":i=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:i,titleAlign:n,descriptionAlign:r}}function g(){a&&(a.remove(),a=null,p=null)}async function w(){if(f)return;const o=localStorage.getItem("product");if(!o)return;const t=JSON.parse(o).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 i=await window.tooltipGetter();h=Array.isArray(i)?i:[],f=!0}function v(o,t){g(),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 i=`http://localhost:3000${t.image}`,n=t.image?`<img class="tooltip-image" src="${i}" />`:"";e.innerHTML=`
|
|
2
2
|
<div class="tooltip-arrow">
|
|
3
3
|
<div class="icon">
|
|
4
4
|
<svg
|
|
@@ -22,4 +22,4 @@
|
|
|
22
22
|
</div>
|
|
23
23
|
${t.position?.image==="right"?n:""}
|
|
24
24
|
</div>
|
|
25
|
-
`,document.body.appendChild(e);const r=e.querySelector(".tooltip-arrow"),{titleSize:y,descriptionSize:T,
|
|
25
|
+
`,document.body.appendChild(e);const r=e.querySelector(".tooltip-arrow"),{titleSize:y,descriptionSize:b,titleAlign:T,descriptionAlign:k}=x(t.size,t.position),z=`font-size: ${y}px; text-align: ${T};`,S=`font-size: ${b}px; text-align: ${k};`,L=e.querySelector(".tooltip-title"),_=e.querySelector(".tooltip-desc");if(L.style.cssText=z,_.style.cssText=S,!o)return;const{coordinates:l,position:s}=u(o),d=15,$=s.horizontal==="left"&&s.vertical==="top",E=s.horizontal==="right"&&s.vertical==="top",O=s.horizontal==="left"&&s.vertical==="bottom",A=s.horizontal==="right"&&s.vertical==="bottom";$?(e.style.left=l.left+"px",e.style.top=l.top+l.height+d+"px",r.classList.add("left_top")):O?(e.style.left=l.left+"px",e.style.bottom=l.bottom+l.height+d+"px",r.classList.add("left_bottom")):E?(e.style.right=l.right+"px",e.style.top=l.top+l.height+d+"px",r.classList.add("right_top")):A&&(e.style.right=l.right+"px",e.style.bottom=l.bottom+l.height+d+"px",r.classList.add("right_bottom")),a=e,p=o}document.addEventListener("mouseenter",async o=>{if(!(o.target instanceof Element)||o.target.closest(".tooltip-overlay")||(await w(),!f))return;const t=h.find(i=>o.target.closest(i.selector));if(!t)return;const e=o.target.closest(t.selector);e&&v(e,t)},!0),document.addEventListener("mouseleave",o=>{if(!a||!p)return;const t=o.relatedTarget;t&&!a.contains(t)&&!p.contains(t)&&g()},!0)})()}));
|