@erain20029/tooltips 2.0.146 → 2.0.149
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(
|
|
1
|
+
(function(h){typeof define=="function"&&define.amd?define(h):h()})((function(){"use strict";const h=".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 i=document.createElement("style");i.id="tooltip-overlay-styles",i.textContent=h,document.head.appendChild(i)}let p=null,g=null,b=[],u=!1;function E(i){const e=i.getBoundingClientRect(),t=window.innerWidth,n=window.innerHeight,s=t/2,o=n/2,d=e.left<=s?"left":"right",f=e.top<=o?"top":"bottom";return{position:{horizontal:d,vertical:f},coordinates:{top:e.top,right:t-e.right,bottom:n-e.bottom,left:e.left,height:e.height}}}function M(i={},e={}){const t={small:16,medium:18,large:22},n={small:12,medium:14,large:16};return{titleSize:t[i.title]??16,descSize:n[i.description]??12,titleAlign:e.title??"left",descAlign:e.description??"left"}}function $(){p&&(p.remove(),p=null,g=null)}async function z(){if(u)return;let i=localStorage.getItem("product");if(!i){const s=window.location.hostname,o=await fetch(`http://localhost:3000/product/${s}`);if(!o.ok)throw new Error("Failed to load tooltip product");const d=await o.json();i=JSON.stringify(d.productId),localStorage.setItem("product",i)}const{id:e}=JSON.parse(i),t=document.createElement("script");if(t.type="module",t.src=`http://localhost:3000/documentation/${e}/tooltip.js`,await new Promise((s,o)=>{t.onload=s,t.onerror=o,document.head.appendChild(t)}),typeof window.tooltipGetter!="function")return;const n=await window.tooltipGetter();b=Array.isArray(n)?n:[],u=!0}function H(i,e){$(),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",s=!!e.image;s?(t.classList.add("with-image"),t.style.maxWidth="384px"):t.style.maxWidth="300px";const o=document.createElement("div");o.className="tooltip-arrow",o.style.position="absolute",o.style.width="34px",o.style.height="34px";const d='<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=s?`<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;":""}" />`:"",r=document.createElement("div");r.className="tooltip-card",r.style.display="flex",r.style.alignItems="center",r.style.gap="12px",r.style.padding="16px";const T=`
|
|
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
|
-
`;
|
|
7
|
-
${
|
|
6
|
+
`;s&&n==="top"?(m+r.outerHTML,r.innerHTML=T,t.innerHTML=m,t.appendChild(r)):(r.innerHTML=`
|
|
7
|
+
${s&&n==="left"?m:""}
|
|
8
8
|
${T}
|
|
9
|
-
${
|
|
10
|
-
`,t.appendChild(
|
|
9
|
+
${s&&n==="right"?m:""}
|
|
10
|
+
`,t.appendChild(r)),t.prepend(o),document.body.appendChild(t);const{titleSize:S,descSize:A,titleAlign:I,descAlign:O}=M(e.size,e.position),w=t.querySelector(".tooltip-title"),v=t.querySelector(".tooltip-desc");w&&(w.style.fontSize=`${S}px`,w.style.textAlign=I),v&&(v.style.fontSize=`${A}px`,v.style.textAlign=O);const{position:a,coordinates:l}=E(i),c=15,y=10;requestAnimationFrame(()=>{const{height:x}=t.getBoundingClientRect(),P=a.horizontal==="left"&&a.vertical==="top",C=a.horizontal==="left"&&a.vertical==="bottom",B=a.horizontal==="right"&&a.vertical==="top",G=a.horizontal==="right"&&a.vertical==="bottom";P&&(t.style.left=`${l.left}px`,t.style.top=`${l.top+l.height+c}px`,o.style.left=`${c}px`,o.style.bottom=`${x-y}px`,o.innerHTML=d),C&&(t.style.left=`${l.left}px`,t.style.bottom=`${l.bottom+l.height+c}px`,o.style.left=`${c}px`,o.style.top=`${x-y}px`,o.innerHTML=f),B&&(t.style.right=`${l.right}px`,t.style.top=`${l.top+l.height+c}px`,o.style.right=`${c}px`,o.style.bottom=`${x-y}px`,o.innerHTML=d),G&&(t.style.right=`${l.right}px`,t.style.bottom=`${l.bottom+l.height+c}px`,o.style.right=`${c}px`,o.style.top=`${x-y}px`,o.innerHTML=f)}),p=t,g=i}document.addEventListener("mouseenter",async i=>{if(!(i.target instanceof Element)||i.target.closest(".tooltip-overlay")||(await z(),!u))return;const e=b.find(n=>i.target.closest(n.selector));if(!e)return;const t=i.target.closest(e.selector);t&&H(t,e)},!0),document.addEventListener("mouseleave",i=>{if(!p||!g)return;const e=i.relatedTarget;e&&!p.contains(e)&&!g.contains(e)&&$()},!0)})()}));
|