@erain20029/tooltips 2.0.142 → 2.0.144
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.
- package/dist/tooltip-overlay.umd.js +9 -17
- package/package.json +1 -1
|
@@ -1,18 +1,10 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
`;const p=e.image?`<img class="tooltip-image" src="http://localhost:3000${e.image}" />`:"",a=document.createElement("div");a.className="tooltip-card",a.innerHTML=`
|
|
6
|
-
${e.position?.image==="left"?p:""}
|
|
7
|
-
<div class="tooltip-text">
|
|
8
|
-
<div class="tooltip-title">${e.title}</div>
|
|
9
|
-
<div class="tooltip-desc">${e.description}</div>
|
|
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,w=[],y=!1;function E(o){const e=o.getBoundingClientRect(),t=window.innerWidth,n=window.innerHeight,s=t/2,i=n/2,h=e.left<=s?"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 b(){p&&(p.remove(),p=null,g=null)}async function z(){if(y)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((s,i)=>{t.onload=s,t.onerror=i,document.head.appendChild(t)}),typeof window.tooltipGetter!="function")return;const n=await window.tooltipGetter();w=Array.isArray(n)?n:[],y=!0}function H(o,e){b(),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 i=document.createElement("div");i.className="tooltip-arrow",i.style.position="absolute",i.style.width="28px",i.style.height="28px";const h='<svg viewBox="0 0 60 40" style="width: 100%; height: 100%; fill: currentColor;"><path d="M26.5 6 L6 38 L47 38 Z" /></svg>',f='<svg viewBox="0 0 60 40" style="width: 100%; height: 100%; fill: currentColor; 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
|
+
<div class="tooltip-text" style="flex: 1;">
|
|
3
|
+
<div class="tooltip-title" style="font-weight: 300;">${e.title}</div>
|
|
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>
|
|
10
5
|
</div>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
font-size: ${T}px;
|
|
17
|
-
text-align: ${E};
|
|
18
|
-
`;const{position:l,coordinates:n}=y(i),r=15,f=25;requestAnimationFrame(()=>{const L=l.horizontal==="left"&&l.vertical==="top",A=l.horizontal==="left"&&l.vertical==="bottom",O=l.horizontal==="right"&&l.vertical==="top",S=l.horizontal==="right"&&l.vertical==="bottom",{height:g}=t.getBoundingClientRect();L&&(t.style.left=`${n.left}px`,t.style.top=`${n.top+n.height+r}px`,o.style.left=`${r}px`,o.style.bottom=`${g+f}px`),A&&(t.style.left=`${n.left}px`,t.style.bottom=`${n.bottom+n.height+r}px`,o.style.left=`${r}px`,o.style.top=`${g-f}px`,o.classList.add("rotated")),O&&(t.style.right=`${n.right}px`,t.style.top=`${n.top+n.height+r}px`,o.style.right=`${r}px`,o.style.bottom=`${g}px`),S&&(t.style.right=`${n.right}px`,t.style.bottom=`${n.bottom+n.height+r}px`,o.style.right=`${r}px`,o.style.top=`${g-f}px`,o.classList.add("rotated"))}),s=t,d=i}document.addEventListener("mouseenter",async i=>{if(!(i.target instanceof Element)||i.target.closest(".tooltip-overlay")||(await w(),!h))return;const e=m.find(o=>i.target.closest(o.selector));if(!e)return;const t=i.target.closest(e.selector);t&&$(t,e)},!0),document.addEventListener("mouseleave",i=>{if(!s||!d)return;const e=i.relatedTarget;e&&!s.contains(e)&&!d.contains(e)&&u()},!0)})()}));
|
|
6
|
+
`;s&&n==="top"?(m+r.outerHTML,r.innerHTML=T,t.innerHTML=m,t.appendChild(r)):(r.innerHTML=`
|
|
7
|
+
${s&&n==="left"?m:""}
|
|
8
|
+
${T}
|
|
9
|
+
${s&&n==="right"?m:""}
|
|
10
|
+
`,t.appendChild(r)),t.prepend(i),document.body.appendChild(t);const{titleSize:A,descSize:C,titleAlign:S,descAlign:P}=M(e.size,e.position),u=t.querySelector(".tooltip-title"),v=t.querySelector(".tooltip-desc");u&&(u.style.fontSize=`${A}px`,u.style.textAlign=S),v&&(v.style.fontSize=`${C}px`,v.style.textAlign=P);const{position:a,coordinates:l}=E(o),c=15,$=15;requestAnimationFrame(()=>{const{height:x}=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=`${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=`${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=`${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=`${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(),!y))return;const e=w.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)&&b()},!0)})()}));
|