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