@erain20029/tooltips 2.0.75 → 2.0.78
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 +11 -5
- package/dist/tooltip.css +10 -10
- package/package.json +1 -1
|
@@ -1,13 +1,19 @@
|
|
|
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:12px;line-height:1.5;font-weight:300;letter-spacing:.2px;overflow-wrap:break-word}.tooltip-arrow{position:absolute;width:0;height:0;pointer-events:none
|
|
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:12px;line-height:1.5;font-weight:300;letter-spacing:.2px;overflow-wrap:break-word}.tooltip-arrow{position:absolute;width:0;height:0;pointer-events:none}.tooltip-arrow .icon{width:24px;height:24px;display:block;position:absolute;color:#53616e}.tooltip-arrow.left_top .icon{top:-40px;left:10px}.tooltip-arrow.left_bottom .icon{bottom:-40px;left:10px}.tooltip-arrow.right_bottom .icon{bottom:-40px;right:10px}.tooltip-arrow.right_top .icon{top:-40px;right:10px}",x=`
|
|
2
|
+
<svg width="53" height="44" view-origin="60 25 60 40" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path d="M100.524 56.5041 L84.3494 33.3916 L68.1748 56.5041 Z" fill="currentColor" />
|
|
4
|
+
</svg>
|
|
5
|
+
`(function(){function v(){if(document.getElementById("tooltip-overlay-styles"))return;const i=document.createElement("style");i.id="tooltip-overlay-styles",i.textContent=d,document.head.appendChild(i)}let s=null,p=null,m=[],u=!1;function y(i){const t=i.getBoundingClientRect(),e=window.innerWidth,n=window.innerHeight,r=t.left+t.width/2,o=t.top+t.height/2;return{coordinates:{x:t.left,y:t.top,width:t.width,height:t.height},position:{horizontal:r<e/2?"left":"right",vertical:o<n/2?"top":"bottom"}}}function b(i,t){if(!i)return{titleSize:16,descriptionSize:12};let e=16,n=12,r="left",o="left";switch(i.title){case"small":e=16,r="left";break;case"medium":e=18;break;case"large":e=22;break}switch(i.description){case"small":n=12;break;case"medium":n=14;break;case"large":n=16;break}switch(t.title){case"left":r="left";break;case"center":r="center";break;case"right":r="right";break}switch(t.description){case"left":o="left";break;case"center":o="center";break;case"right":o="right";break}return{titleSize:e,descriptionSize:n,titleAlign:r,descriptionAlign:o}}function w(){s&&(s.remove(),s=null,p=null)}async function k(){if(u)return;const i=localStorage.getItem("product");if(!i)return;const{id:t}=JSON.parse(i),e=document.createElement("script");e.src=`http://localhost:3000/documentation/${t}/tooltip.js`,await new Promise((n,r)=>{e.onload=n,e.onerror=r,document.head.appendChild(e)}),typeof window.tooltipGetter=="function"&&(m=await window.tooltipGetter(),u=!0)}function z(i,t){w(),v();const e=document.createElement("div");e.className="tooltip-overlay",e.style.left="-9999px",e.style.top="-9999px",t.image&&e.classList.add("with-image");const n=`http://localhost:3000${t.image}`,r=t.image?`<img class="tooltip-image" src="${n}" />`:"";e.innerHTML=`
|
|
2
6
|
<div class="tooltip-arrow">
|
|
3
|
-
<
|
|
7
|
+
<div class="icon">
|
|
8
|
+
${x}
|
|
9
|
+
</div>
|
|
4
10
|
</div>
|
|
5
11
|
<div class="tooltip-card">
|
|
6
|
-
${t.position?.image==="left"?
|
|
12
|
+
${t.position?.image==="left"?r:""}
|
|
7
13
|
<div class="tooltip-text">
|
|
8
14
|
<div class="tooltip-title">${t.title}</div>
|
|
9
15
|
<div class="tooltip-desc">${t.description}</div>
|
|
10
16
|
</div>
|
|
11
|
-
${t.position?.image==="right"?
|
|
17
|
+
${t.position?.image==="right"?r:""}
|
|
12
18
|
</div>
|
|
13
|
-
`,document.body.appendChild(e);const{coordinates:o,position:
|
|
19
|
+
`,document.body.appendChild(e);const{coordinates:o,position:l}=y(i),h=e.getBoundingClientRect(),g=16;let a=0,c=0;const f=e.querySelector(".tooltip-arrow"),{titleSize:S,descriptionSize:$,titleAlign:L,descriptionAlign:T}=b(t.size,t.position),_=`font-size: ${S}px; text-align: ${L};`,C=`font-size: ${$}px; text-align: ${T};`,E=e.querySelector(".tooltip-title"),A=e.querySelector(".tooltip-desc");E.style.cssText=_,A.style.cssText=C,l.horizontal==="left"&&l.vertical==="top"?(a=o.x,c=o.y+o.height+g,f.classList.add("left_top")):l.horizontal==="left"&&l.vertical==="bottom"?(a=o.x,c=o.y-h.height-g,f.classList.add("left_bottom")):l.horizontal==="right"&&l.vertical==="top"?(a=o.x+o.width-h.width,c=o.y+o.height+g,f.classList.add("right_top")):l.horizontal==="right"&&l.vertical==="bottom"&&(a=o.x+o.width-h.width,c=o.y-h.height-g,f.classList.add("right_bottom")),e.style.left=`${Math.max(8,a)}px`,e.style.top=`${Math.max(8,c)}px`,console.log(t),s=e,p=i}document.addEventListener("mouseenter",async i=>{if(!(i.target instanceof Element)||i.target.closest(".tooltip-overlay")||(await k(),!u))return;const t=m.find(n=>i.target.closest(n.selector));if(!t)return;const e=i.target.closest(t.selector);e&&z(e,t)},!0),document.addEventListener("mouseleave",i=>{if(!s||!p)return;const t=i.relatedTarget;t&&!s.contains(t)&&!p.contains(t)&&w()},!0)})()}));
|
package/dist/tooltip.css
CHANGED
|
@@ -54,32 +54,32 @@
|
|
|
54
54
|
width: 0;
|
|
55
55
|
height: 0;
|
|
56
56
|
pointer-events: none;
|
|
57
|
-
color: #53616E;
|
|
58
57
|
}
|
|
59
58
|
|
|
60
|
-
.tooltip-arrow
|
|
59
|
+
.tooltip-arrow .icon {
|
|
61
60
|
width: 24px;
|
|
62
61
|
height: 24px;
|
|
63
62
|
display: block;
|
|
64
63
|
position: absolute;
|
|
64
|
+
color: #53616E;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
.tooltip-arrow.left_top
|
|
68
|
-
top: -
|
|
67
|
+
.tooltip-arrow.left_top .icon {
|
|
68
|
+
top: -40px;
|
|
69
69
|
left: 10px;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
.tooltip-arrow.left_bottom
|
|
73
|
-
bottom: -
|
|
72
|
+
.tooltip-arrow.left_bottom .icon {
|
|
73
|
+
bottom: -40px;
|
|
74
74
|
left: 10px;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
.tooltip-arrow.right_bottom
|
|
78
|
-
bottom: -
|
|
77
|
+
.tooltip-arrow.right_bottom .icon {
|
|
78
|
+
bottom: -40px;
|
|
79
79
|
right: 10px;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
.tooltip-arrow.right_top
|
|
83
|
-
top: -
|
|
82
|
+
.tooltip-arrow.right_top .icon {
|
|
83
|
+
top: -40px;
|
|
84
84
|
right: 10px;
|
|
85
85
|
}
|