@erain20029/tooltips 2.0.136 → 2.0.138
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 +18 -27
- package/package.json +1 -1
|
@@ -1,27 +1,18 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
/>
|
|
20
|
-
</svg>
|
|
21
|
-
`,t.appendChild(i),t.appendChild(n),document.body.appendChild(t);const{titleSize:$,descriptionSize:T,titleAlign:z,descriptionAlign:k}=y(e.size,e.position);t.querySelector(".tooltip-title").style.cssText=`
|
|
22
|
-
font-size: ${$}px;
|
|
23
|
-
text-align: ${z};
|
|
24
|
-
`,t.querySelector(".tooltip-desc").style.cssText=`
|
|
25
|
-
font-size: ${T}px;
|
|
26
|
-
text-align: ${k};
|
|
27
|
-
`,requestAnimationFrame(()=>{const r=o.getBoundingClientRect(),h=t.getBoundingClientRect(),s=w(o).position,E=s.horizontal==="left"&&s.vertical==="top",L=s.horizontal==="left"&&s.vertical==="bottom",S=s.horizontal==="right"&&s.vertical==="top",A=s.horizontal==="right"&&s.vertical==="bottom",a=15,u=30;E&&(t.style.left=`${r.left}px`,t.style.top=`${r.top+r.height+a}px`,i.style.left=`${a}px`,i.style.bottom=`${h.height}px`),L&&(t.style.left=`${r.left}px`,t.style.bottom=`${window.innerHeight-r.bottom+r.height+u}px`,i.style.left=`${a}px`,i.style.top=`${h.height-a}px`,i.classList.add("rotated")),S&&(t.style.right=`${window.innerWidth-r.right}px`,t.style.top=`${r.top+r.height+a}px`,i.style.right=`${a}px`,i.style.bottom=`${h.height}px`),A&&(t.style.right=`${window.innerWidth-r.right}px`,t.style.bottom=`${window.innerHeight-r.bottom+r.height+a}px`,i.style.right=`${a}px`,i.style.top=`${h.height-u}px`,i.classList.add("rotated"))}),c=t,p=o}document.addEventListener("mouseenter",async o=>{if(!(o.target instanceof Element)||o.target.closest(".tooltip-overlay")||(await v(),!g))return;const e=f.find(i=>o.target.closest(i.selector));if(!e)return;const t=o.target.closest(e.selector);t&&b(t,e)},!0),document.addEventListener("mouseleave",o=>{if(!c||!p)return;const e=o.relatedTarget;e&&!c.contains(e)&&!p.contains(e)&&m()},!0)})()}));
|
|
1
|
+
(function(r){typeof define=="function"&&define.amd?define(r):r()})((function(){"use strict";const r=".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 u(){if(document.getElementById("tooltip-overlay-styles"))return;const i=document.createElement("style");i.id="tooltip-overlay-styles",i.textContent=r,document.head.appendChild(i)}let s=null,a=null,g=[],p=!1;function h(i={},e={}){const t={small:16,medium:18,large:22},o={small:12,medium:14,large:16};return{titleSize:t[i.title]??16,descSize:o[i.description]??12,titleAlign:e.title??"left",descAlign:e.description??"left"}}function m(){s&&(s.remove(),s=null,a=null)}async function x(){if(p)return;const i=localStorage.getItem("product");if(!i)return;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((c,l)=>{t.onload=c,t.onerror=l,document.head.appendChild(t)}),typeof window.tooltipGetter!="function")return;const o=await window.tooltipGetter();g=Array.isArray(o)?o:[],p=!0}function y(i,e){m(),u();const t=document.createElement("div");t.className="tooltip-overlay",t.style.position="fixed",t.style.pointerEvents="none",t.style.zIndex="9999",e.image&&t.classList.add("with-image");const o=document.createElement("div");o.className="tooltip-arrow",o.innerHTML=`
|
|
2
|
+
<svg class="icon" viewBox="0 0 60 40">
|
|
3
|
+
<path d="M26.5 6 L6 38 L47 38 Z" />
|
|
4
|
+
</svg>
|
|
5
|
+
`;const c=e.image?`<img class="tooltip-image" src="http://localhost:3000${e.image}" />`:"",l=document.createElement("div");l.className="tooltip-card",l.innerHTML=`
|
|
6
|
+
${e.position?.image==="left"?c:""}
|
|
7
|
+
<div class="tooltip-text">
|
|
8
|
+
<div class="tooltip-title">${e.title}</div>
|
|
9
|
+
<div class="tooltip-desc">${e.description}</div>
|
|
10
|
+
</div>
|
|
11
|
+
${e.position?.image==="right"?c:""}
|
|
12
|
+
`,t.appendChild(o),t.appendChild(l),document.body.appendChild(t);const{titleSize:v,descSize:w,titleAlign:$,descAlign:T}=h(e.size,e.position);t.querySelector(".tooltip-title").style.cssText=`
|
|
13
|
+
font-size: ${v}px;
|
|
14
|
+
text-align: ${$};
|
|
15
|
+
`,t.querySelector(".tooltip-desc").style.cssText=`
|
|
16
|
+
font-size: ${w}px;
|
|
17
|
+
text-align: ${T};
|
|
18
|
+
`,requestAnimationFrame(()=>{const b=position.horizontal==="left"&&position.vertical==="top",z=position.horizontal==="left"&&position.vertical==="bottom",E=position.horizontal==="right"&&position.vertical==="top",L=position.horizontal==="right"&&position.vertical==="bottom",n=15,f=15,{height:d}=t.getBoundingClientRect();b&&(t.style.left=`${coordinates.left}px`,t.style.top=`${coordinates.top+coordinates.height+n}px`,o.style.left=`${n}px`,o.style.bottom=`${d}px`),z&&(t.style.left=`${coordinates.left}px`,t.style.bottom=`${coordinates.bottom+coordinates.height+n}px`,o.style.left=`${n}px`,o.style.top=`${d-f}px`,o.classList.add("rotated")),E&&(t.style.right=`${coordinates.right}px`,t.style.top=`${coordinates.top+coordinates.height+n}px`,o.style.right=`${n}px`,o.style.bottom=`${d}px`),L&&(t.style.right=`${coordinates.right}px`,t.style.bottom=`${coordinates.bottom+coordinates.height+n}px`,o.style.right=`${n}px`,o.style.top=`${d-f}px`,o.classList.add("rotated"))}),s=t,a=i}document.addEventListener("mouseenter",async i=>{if(!(i.target instanceof Element)||i.target.closest(".tooltip-overlay")||(await x(),!p))return;const e=g.find(o=>i.target.closest(o.selector));if(!e)return;const t=i.target.closest(e.selector);t&&y(t,e)},!0),document.addEventListener("mouseleave",i=>{if(!s||!a)return;const e=i.relatedTarget;e&&!s.contains(e)&&!a.contains(e)&&m()},!0)})()}));
|