@erain20029/tooltips 0.1.0 → 1.0.0
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.cjs +7 -7
- package/dist/tooltip.css +77 -35
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(p){typeof define=="function"&&define.amd?define(p):p()})((function(){"use strict";const p=
|
|
1
|
+
(function(p){typeof define=="function"&&define.amd?define(p):p()})((function(){"use strict";const p=".overlay{background:#fff;color:#111;position:fixed;border-radius:10px;z-index:99999;box-shadow:0 0 34px #223c5033;overflow:hidden}.tooltip-card{width:100%;height:100%;display:flex;flex-direction:column}.tooltip-body{height:100%;display:flex;gap:16px;padding:16px 20px;align-items:center;box-sizing:border-box}.tooltip-media{flex:0 0 auto;display:flex;align-items:center;justify-content:center}.tooltip-media--top{padding:16px 20px 0}.tooltip-image{width:120px;height:120px;object-fit:cover;border-radius:8px;display:block;flex-shrink:0}.tooltip-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}.tooltip-title{font-weight:600;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.tooltip-desc{font-weight:300;line-height:1.5;letter-spacing:.2px;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}.tooltip--image-top .tooltip-body{align-items:flex-start}",d={tooltips:[],ready:!1},g=new Set;function x(t){return g.has(t)?Promise.resolve():new Promise((e,o)=>{const i=document.createElement("script");i.src=t,i.async=!0,i.onload=()=>{g.add(t),e()},i.onerror=()=>o(new Error(`Failed to load script: ${t}`)),document.head.appendChild(i)})}async function w(){if(d.ready)return;const t=localStorage.getItem("product");if(!t)return;const e=JSON.parse(t).id;await x(`http://localhost:3000/documentation/${e}/tooltip.js`),d.tooltips=await window.tooltipGetter(),d.ready=!0}document.addEventListener("mouseenter",async t=>{await w();const e=t.target;if(!e||!(e instanceof Element))return;const o=d.tooltips.find(C=>e.matches(C.selector));if(!o)return;const i=e.getBoundingClientRect(),l=z(i),{x:n,y:a}=v(l,i.left,i.top);T({tooltip:o,rect:i,x:n,y:a})},!0),document.addEventListener("mouseleave",t=>{s&&(t.target===s||t.target===m)&&h()},!0);function y({title:t,description:e,image:o}){const i=n=>n==="center"||n==="right"?n:"left",l=n=>n==="top"||n==="right"?n:"left";return{title:i(t),description:i(e),image:l(o)}}function b({title:t,description:e}){const o={small:14,medium:16,large:20};return{title:o[t]??16,description:o[e]??14}}const f=500,u=200;let r=0,c=0,s=null,m=null;function h(){s&&(s.remove(),s=null,m=null)}function v(t,e,o){switch(t){case"left-bottom":r=e,c=o+36;break;case"right-bottom":r=e-f+45,c=o+36;break;case"left-top":r=e,c=o-u-18;break;case"right-top":r=e-f+45,c=o-u-18;break}return{x:r,y:c}}function $(){const t=document.createElement("style");t.textContent=p,document.body.appendChild(t)}function k(t){const e=document.createElement("div");return e.className=t,e}function T(t){if(!t?.tooltip)return null;h();const e=t.tooltip,o=k("overlay");o.style.position="fixed",o.style.width=`${f}px`,o.style.height=`${u}px`,o.style.left=`${t.x}px`,o.style.top=`${t.y}px`;const i=b({title:e.size.title,description:e.size.description}),l=y({title:e.position.title,description:e.position.description,image:e.position.image});console.log(e);const n="http://localhost:3000";return o.innerHTML=`
|
|
2
2
|
<div class="content">
|
|
3
|
-
${
|
|
3
|
+
${l.image==="top"?`
|
|
4
4
|
<div class="image-container">
|
|
5
5
|
<img
|
|
6
6
|
id="tooltip-image"
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
</div>
|
|
10
10
|
`:""}
|
|
11
11
|
<div class="text-container">
|
|
12
|
-
${
|
|
12
|
+
${l.image==="left"?`
|
|
13
13
|
<img
|
|
14
14
|
id="tooltip-image"
|
|
15
15
|
src="${n}${e.image}"
|
|
@@ -17,18 +17,18 @@
|
|
|
17
17
|
`:""}
|
|
18
18
|
<div class="text-content">
|
|
19
19
|
<div>
|
|
20
|
-
<span style="font-size: ${i.title}px; text-align: ${
|
|
20
|
+
<span style="font-size: ${i.title}px; text-align: ${l.title}">
|
|
21
21
|
${e.title}
|
|
22
22
|
</span>
|
|
23
23
|
</div>
|
|
24
24
|
|
|
25
25
|
<div>
|
|
26
|
-
<span style="font-size: ${i.description}px; text-align: ${
|
|
26
|
+
<span style="font-size: ${i.description}px; text-align: ${l.description}">
|
|
27
27
|
${e.description}
|
|
28
28
|
</span>
|
|
29
29
|
<div>
|
|
30
30
|
</div>
|
|
31
|
-
${
|
|
31
|
+
${l.image==="right"?`
|
|
32
32
|
<img
|
|
33
33
|
id="tooltip-image"
|
|
34
34
|
src="${n}${e.image}"
|
|
@@ -36,4 +36,4 @@
|
|
|
36
36
|
`:""}
|
|
37
37
|
</div>
|
|
38
38
|
</div>
|
|
39
|
-
`,document.body.appendChild(o),$(),s=o,m=t.rect,o}function
|
|
39
|
+
`,document.body.appendChild(o),$(),s=o,m=t.rect,o}function z(t){const e=window.innerWidth/2,o=window.innerHeight/2,i=t.left+t.width/2,l=t.top+t.height/2,n=i<e,a=l<o;return n&&a?"left-bottom":!n&&a?"right-bottom":n&&!a?"left-top":"right-top"}}));
|
package/dist/tooltip.css
CHANGED
|
@@ -1,49 +1,91 @@
|
|
|
1
1
|
.overlay {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
box-shadow: 0px 0px 34px 0px rgba(34, 60, 80, 0.2);
|
|
2
|
+
background: white;
|
|
3
|
+
color: #111;
|
|
4
|
+
position: fixed;
|
|
5
|
+
border-radius: 10px;
|
|
6
|
+
z-index: 99999;
|
|
7
|
+
box-shadow: 0 0 34px rgba(34, 60, 80, 0.2);
|
|
8
|
+
overflow: hidden; /* важно, чтобы скругление работало */
|
|
10
9
|
}
|
|
11
10
|
|
|
12
|
-
.
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
gap: 16px;
|
|
18
|
-
padding: 0 24px;
|
|
11
|
+
.tooltip-card {
|
|
12
|
+
width: 100%;
|
|
13
|
+
height: 100%;
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
19
16
|
}
|
|
20
17
|
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
/* BODY: общий контейнер контента */
|
|
19
|
+
.tooltip-body {
|
|
20
|
+
height: 100%;
|
|
21
|
+
display: flex;
|
|
22
|
+
gap: 16px;
|
|
23
|
+
padding: 16px 20px;
|
|
24
|
+
align-items: center;
|
|
25
|
+
box-sizing: border-box;
|
|
23
26
|
}
|
|
24
27
|
|
|
25
|
-
|
|
26
|
-
|
|
28
|
+
/* MEDIA: картинка никогда не сжимается */
|
|
29
|
+
.tooltip-media {
|
|
30
|
+
flex: 0 0 auto;
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: center;
|
|
27
34
|
}
|
|
28
35
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
object-fit: cover;
|
|
36
|
+
/* TOP картинка — отдельный блок сверху */
|
|
37
|
+
.tooltip-media--top {
|
|
38
|
+
padding: 16px 20px 0 20px;
|
|
33
39
|
}
|
|
34
40
|
|
|
35
|
-
.
|
|
36
|
-
|
|
37
|
-
margin: 10px auto;
|
|
38
|
-
font-weight: 300;
|
|
39
|
-
display: block;
|
|
40
|
-
text-align-last: "center";
|
|
41
|
-
line-height: 1.5;
|
|
42
|
-
letter-spacing: .2px;
|
|
43
|
-
hyphens: auto;
|
|
44
|
-
overflow-wrap: break-word
|
|
41
|
+
.tooltip-media--side {
|
|
42
|
+
/* сбоку */
|
|
45
43
|
}
|
|
46
44
|
|
|
47
|
-
/*
|
|
45
|
+
/* сама картинка */
|
|
46
|
+
.tooltip-image {
|
|
47
|
+
width: 120px;
|
|
48
|
+
height: 120px;
|
|
49
|
+
object-fit: cover;
|
|
50
|
+
border-radius: 8px;
|
|
51
|
+
display: block;
|
|
52
|
+
flex-shrink: 0; /* критично */
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* TEXT: занимает всё оставшееся место */
|
|
56
|
+
.tooltip-text {
|
|
57
|
+
flex: 1 1 auto;
|
|
58
|
+
min-width: 0; /* критично для переноса/ellipsis в flex */
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
gap: 8px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Заголовок — максимум 2 строки */
|
|
65
|
+
.tooltip-title {
|
|
66
|
+
font-weight: 600;
|
|
67
|
+
line-height: 1.25;
|
|
68
|
+
overflow: hidden;
|
|
69
|
+
display: -webkit-box;
|
|
70
|
+
-webkit-line-clamp: 2;
|
|
71
|
+
-webkit-box-orient: vertical;
|
|
72
|
+
}
|
|
48
73
|
|
|
49
|
-
|
|
74
|
+
/* Описание — максимум N строк + мягкий перенос */
|
|
75
|
+
.tooltip-desc {
|
|
76
|
+
font-weight: 300;
|
|
77
|
+
line-height: 1.5;
|
|
78
|
+
letter-spacing: .2px;
|
|
79
|
+
overflow-wrap: anywhere;
|
|
80
|
+
hyphens: auto;
|
|
81
|
+
|
|
82
|
+
overflow: hidden;
|
|
83
|
+
display: -webkit-box;
|
|
84
|
+
-webkit-line-clamp: 5; /* регулируй */
|
|
85
|
+
-webkit-box-orient: vertical;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* Если картинка сверху — body должен стартовать сверху, а не по центру */
|
|
89
|
+
.tooltip--image-top .tooltip-body {
|
|
90
|
+
align-items: flex-start;
|
|
91
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@erain20029/tooltips",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "1.0.0",
|
|
5
5
|
"description": "Universal tooltip overlay for any HTML project",
|
|
6
6
|
"main": "dist/tooltip-overlay.js",
|
|
7
7
|
"style": "dist/tooltip.css",
|
|
@@ -41,4 +41,4 @@
|
|
|
41
41
|
"typescript-eslint": "^8.46.4",
|
|
42
42
|
"vite": "^7.2.4"
|
|
43
43
|
}
|
|
44
|
-
}
|
|
44
|
+
}
|