@erain20029/tooltips 2.0.140 → 2.0.141
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 +10 -10
- package/package.json +1 -1
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(c){typeof define=="function"&&define.amd?define(c):c()})((function(){"use strict";const c=".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 x(){if(document.getElementById("tooltip-overlay-styles"))return;const i=document.createElement("style");i.id="tooltip-overlay-styles",i.textContent=c,document.head.appendChild(i)}let s=null,d=null,f=[],h=!1;function y(i){const e=i.getBoundingClientRect(),t=e.left+e.width/2,o=e.top+e.height/2;return{position:{horizontal:t<window.innerWidth/2?"left":"right",vertical:o<window.innerHeight/2?"top":"bottom"},coordinates:{top:e.top,right:window.innerWidth-e.right,bottom:window.innerHeight-e.bottom,left:e.left,height:e.height}}}function v(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,d=null)}async function w(){if(h)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((p,a)=>{t.onload=p,t.onerror=a,document.head.appendChild(t)}),typeof window.tooltipGetter!="function")return;const o=await window.tooltipGetter();f=Array.isArray(o)?o:[],h=!0}function $(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",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>
|
|
5
|
-
`;const
|
|
6
|
-
${e.position?.image==="left"?
|
|
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
7
|
<div class="tooltip-text">
|
|
8
8
|
<div class="tooltip-title">${e.title}</div>
|
|
9
9
|
<div class="tooltip-desc">${e.description}</div>
|
|
10
10
|
</div>
|
|
11
|
-
${e.position?.image==="right"?
|
|
12
|
-
`,t.appendChild(o),t.appendChild(
|
|
13
|
-
font-size: ${
|
|
14
|
-
text-align: ${
|
|
11
|
+
${e.position?.image==="right"?p:""}
|
|
12
|
+
`,t.appendChild(o),t.appendChild(a),document.body.appendChild(t);const{titleSize:b,descSize:T,titleAlign:z,descAlign:E}=v(e.size,e.position);t.querySelector(".tooltip-title").style.cssText=`
|
|
13
|
+
font-size: ${b}px;
|
|
14
|
+
text-align: ${z};
|
|
15
15
|
`,t.querySelector(".tooltip-desc").style.cssText=`
|
|
16
|
-
font-size: ${
|
|
17
|
-
text-align: ${
|
|
18
|
-
`;const{position:
|
|
16
|
+
font-size: ${T}px;
|
|
17
|
+
text-align: ${E};
|
|
18
|
+
`;const{position:l,coordinates:n}=y(i),r=15,u=15;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}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-u}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-u}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=f.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)&&m()},!0)})()}));
|