@erain20029/tooltips 2.0.138 → 2.0.140
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,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(g){typeof define=="function"&&define.amd?define(g):g()})((function(){"use strict";const g=".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 $(){if(document.getElementById("tooltip-overlay-styles"))return;const i=document.createElement("style");i.id="tooltip-overlay-styles",i.textContent=g,document.head.appendChild(i)}let a=null,f=null,y=[],x=!1;function b(i){let e={horizontal:"",vertical:""};const{top:t,right:o,bottom:c,left:l}=i.getBoundingClientRect(),h=window.innerWidth,m=window.innerHeight,d=h/2,p=m/2;return l<=d&&t<=p&&(e.horizontal="left",e.vertical="top"),l<=d&&t>p&&(e.horizontal="left",e.vertical="bottom"),l>d&&t<=p&&(e.horizontal="right",e.vertical="top"),l>d&&t>p&&(e.horizontal="right",e.vertical="bottom"),{position:e,coordinates:{top:t,right:h-o,bottom:m-c,left:l}}}function T(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 v(){a&&(a.remove(),a=null,f=null)}async function z(){if(x)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();y=Array.isArray(o)?o:[],x=!0}function E(i,e){v(),$();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
2
|
<svg class="icon" viewBox="0 0 60 40">
|
|
3
3
|
<path d="M26.5 6 L6 38 L47 38 Z" />
|
|
4
4
|
</svg>
|
|
@@ -9,10 +9,10 @@
|
|
|
9
9
|
<div class="tooltip-desc">${e.description}</div>
|
|
10
10
|
</div>
|
|
11
11
|
${e.position?.image==="right"?c:""}
|
|
12
|
-
`,t.appendChild(o),t.appendChild(l),document.body.appendChild(t);const{titleSize:
|
|
13
|
-
font-size: ${
|
|
14
|
-
text-align: ${
|
|
12
|
+
`,t.appendChild(o),t.appendChild(l),document.body.appendChild(t);const{titleSize:h,descSize:m,titleAlign:d,descAlign:p}=T(e.size,e.position);t.querySelector(".tooltip-title").style.cssText=`
|
|
13
|
+
font-size: ${h}px;
|
|
14
|
+
text-align: ${d};
|
|
15
15
|
`,t.querySelector(".tooltip-desc").style.cssText=`
|
|
16
|
-
font-size: ${
|
|
17
|
-
text-align: ${
|
|
18
|
-
|
|
16
|
+
font-size: ${m}px;
|
|
17
|
+
text-align: ${p};
|
|
18
|
+
`;const{position:r,coordinates:n}=b(i),s=15,w=15,{height:u}=t.getBoundingClientRect();requestAnimationFrame(()=>{const L=r.horizontal==="left"&&r.vertical==="top",H=r.horizontal==="left"&&r.vertical==="bottom",A=r.horizontal==="right"&&r.vertical==="top",O=r.horizontal==="right"&&r.vertical==="bottom";L&&(t.style.left=`${n.left}px`,t.style.top=`${n.top+n.height+s}px`,o.style.left=`${s}px`,o.style.bottom=`${u}px`),H&&(t.style.left=`${n.left}px`,t.style.bottom=`${n.bottom+n.height+s}px`,o.style.left=`${s}px`,o.style.top=`${u-w}px`,o.classList.add("rotated")),A&&(t.style.right=`${n.right}px`,t.style.top=`${n.top+n.height+s}px`,o.style.right=`${s}px`,o.style.bottom=`${u}px`),O&&(t.style.right=`${n.right}px`,t.style.bottom=`${n.bottom+n.height+s}px`,o.style.right=`${s}px`,o.style.top=`${u-w}px`,o.classList.add("rotated"))}),a=t,f=i}document.addEventListener("mouseenter",async i=>{if(!(i.target instanceof Element)||i.target.closest(".tooltip-overlay")||(await z(),!x))return;const e=y.find(o=>i.target.closest(o.selector));if(!e)return;const t=i.target.closest(e.selector);t&&E(t,e)},!0),document.addEventListener("mouseleave",i=>{if(!a||!f)return;const e=i.relatedTarget;e&&!a.contains(e)&&!f.contains(e)&&v()},!0)})()}));
|