@erain20029/tooltips 2.0.145 → 2.0.148
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,10 +1,10 @@
|
|
|
1
|
-
(function(d){typeof define=="function"&&define.amd?define(d):d()})((function(){"use strict";const d=".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.rotated .icon{transform:rotate(180deg)}";(function(){function L(){if(document.getElementById("tooltip-overlay-styles"))return;const o=document.createElement("style");o.id="tooltip-overlay-styles",o.textContent=d,document.head.appendChild(o)}let p=null,g=null,
|
|
1
|
+
(function(d){typeof define=="function"&&define.amd?define(d):d()})((function(){"use strict";const d=".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.rotated .icon{transform:rotate(180deg)}";(function(){function L(){if(document.getElementById("tooltip-overlay-styles"))return;const o=document.createElement("style");o.id="tooltip-overlay-styles",o.textContent=d,document.head.appendChild(o)}let p=null,g=null,b=[],u=!1;function E(o){const e=o.getBoundingClientRect(),t=window.innerWidth,n=window.innerHeight,r=t/2,i=n/2,h=e.left<=r?"left":"right",f=e.top<=i?"top":"bottom";return{position:{horizontal:h,vertical:f},coordinates:{top:e.top,right:t-e.right,bottom:n-e.bottom,left:e.left,height:e.height}}}function M(o={},e={}){const t={small:16,medium:18,large:22},n={small:12,medium:14,large:16};return{titleSize:t[o.title]??16,descSize:n[o.description]??12,titleAlign:e.title??"left",descAlign:e.description??"left"}}function T(){p&&(p.remove(),p=null,g=null)}async function z(){if(u)return;const o=localStorage.getItem("product");if(!o)return;const{id:e}=JSON.parse(o),t=document.createElement("script");if(t.type="module",t.src=`http://localhost:3000/documentation/${e}/tooltip.js`,await new Promise((r,i)=>{t.onload=r,t.onerror=i,document.head.appendChild(t)}),typeof window.tooltipGetter!="function")return;const n=await window.tooltipGetter();b=Array.isArray(n)?n:[],u=!0}function H(o,e){T(),L();const t=document.createElement("div");t.className="tooltip-overlay",t.style.position="fixed",t.style.pointerEvents="none",t.style.zIndex="9999";const n=e.position?.image??"left",r=!!e.image;r?(t.classList.add("with-image"),t.style.maxWidth="384px"):t.style.maxWidth="300px";const i=document.createElement("div");i.className="tooltip-arrow",i.style.position="absolute",i.style.width="34px",i.style.height="34px";const h='<svg viewBox="0 0 60 40" style="width: 100%; height: 100%; fill: #53616e;"><path d="M26.5 6 L6 38 L47 38 Z" /></svg>',f='<svg viewBox="0 0 60 40" style="width: 100%; height: 100%; fill: #53616e; transform: rotate(180deg);"><path d="M26.5 6 L6 38 L47 38 Z" /></svg>',m=r?`<img src="http://localhost:3000${e.image}" style="width: 80px; height: 80px; border-radius: 4px; object-fit: cover; ${n==="top"?"display: block; margin: 24px auto 0;":""}" />`:"",s=document.createElement("div");s.className="tooltip-card",s.style.display="flex",s.style.alignItems="center",s.style.gap="12px",s.style.padding="16px";const $=`
|
|
2
2
|
<div class="tooltip-text" style="flex: 1;">
|
|
3
3
|
<div class="tooltip-title" style="font-weight: 300;">${e.title}</div>
|
|
4
4
|
<div class="tooltip-desc" style="margin-top: 4px; line-height: 1.5; font-weight: 300; letter-spacing: 0.2px; overflow-wrap: break-word; hyphens: auto;">${e.description}</div>
|
|
5
5
|
</div>
|
|
6
|
-
`;r&&n==="top"?(m+s.outerHTML,s.innerHTML
|
|
6
|
+
`;r&&n==="top"?(m+s.outerHTML,s.innerHTML=$,t.innerHTML=m,t.appendChild(s)):(s.innerHTML=`
|
|
7
7
|
${r&&n==="left"?m:""}
|
|
8
|
-
${
|
|
8
|
+
${$}
|
|
9
9
|
${r&&n==="right"?m:""}
|
|
10
|
-
`,t.appendChild(s)),t.prepend(i),document.body.appendChild(t);const{titleSize:A,descSize:S,titleAlign:P,descAlign:C}=M(e.size,e.position),
|
|
10
|
+
`,t.appendChild(s)),t.prepend(i),document.body.appendChild(t);const{titleSize:A,descSize:S,titleAlign:P,descAlign:C}=M(e.size,e.position),v=t.querySelector(".tooltip-title"),w=t.querySelector(".tooltip-desc");v&&(v.style.fontSize=`${A}px`,v.style.textAlign=P),w&&(w.style.fontSize=`${S}px`,w.style.textAlign=C);const{position:a,coordinates:l}=E(o),c=15,x=10;requestAnimationFrame(()=>{const{height:y}=t.getBoundingClientRect(),O=a.horizontal==="left"&&a.vertical==="top",I=a.horizontal==="left"&&a.vertical==="bottom",B=a.horizontal==="right"&&a.vertical==="top",G=a.horizontal==="right"&&a.vertical==="bottom";O&&(t.style.left=`${l.left}px`,t.style.top=`${l.top+l.height+c}px`,i.style.left=`${c}px`,i.style.bottom=`${y-x}px`,i.innerHTML=h),I&&(t.style.left=`${l.left}px`,t.style.bottom=`${l.bottom+l.height+c}px`,i.style.left=`${c}px`,i.style.top=`${y-x}px`,i.innerHTML=f),B&&(t.style.right=`${l.right}px`,t.style.top=`${l.top+l.height+c}px`,i.style.right=`${c}px`,i.style.bottom=`${y-x}px`,i.innerHTML=h),G&&(t.style.right=`${l.right}px`,t.style.bottom=`${l.bottom+l.height+c}px`,i.style.right=`${c}px`,i.style.top=`${y-x}px`,i.innerHTML=f)}),p=t,g=o}document.addEventListener("mouseenter",async o=>{if(!(o.target instanceof Element)||o.target.closest(".tooltip-overlay")||(await z(),!u))return;const e=b.find(n=>o.target.closest(n.selector));if(!e)return;const t=o.target.closest(e.selector);t&&H(t,e)},!0),document.addEventListener("mouseleave",o=>{if(!p||!g)return;const e=o.relatedTarget;e&&!p.contains(e)&&!g.contains(e)&&T()},!0)})()}));
|