Skip to content

Commit 23acbf2

Browse files
dysfuncdysfunc
authored
Merge pull request #5 from svelte-plugins/fix-offets
fix(offsets): properly calc position using both x and y offsets
2 parents 8eafe54 + c838fe9 commit 23acbf2

File tree

4 files changed

+182
-44
lines changed

4 files changed

+182
-44
lines changed

‎docs/package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@svelte-plugins/tooltips",
3-
"version": "0.1.5",
3+
"version": "0.1.6",
44
"license": "MIT",
55
"description": "A simple tooltip action and component designed for Svelte.",
66
"author": "Kieran Boyle (https://github.com/dysfunc)",

‎src/action-tooltip.svelte‎

Lines changed: 89 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -136,10 +136,25 @@
136136
border: 0 !important;
137137
}
138138
139+
.tooltip.bottom,
140+
.tooltip.top {
141+
--tooltip-offset-x: 0px;
142+
--tooltip-offset-y: 12px;
143+
}
144+
145+
.tooltip.left,
146+
.tooltip.right {
147+
--tooltip-offset-x: 12px;
148+
--tooltip-offset-y: 0px;
149+
}
150+
139151
.tooltip.bottom {
140152
bottom: 0;
141153
left: 50%;
142-
transform: translate(-50%, calc(100% + var(--tooltip-offset-y)));
154+
transform: translate(
155+
calc(-50% + var(--tooltip-offset-x)),
156+
calc(100% + var(--tooltip-offset-y))
157+
);
143158
}
144159
145160
.tooltip.bottom:after {
@@ -152,7 +167,10 @@
152167
.tooltip.top {
153168
left: 50%;
154169
top: 0;
155-
transform: translate(-50%, calc(-100% - var(--tooltip-offset-y)));
170+
transform: translate(
171+
calc(-50% + var(--tooltip-offset-x)),
172+
calc(-100% - var(--tooltip-offset-y))
173+
);
156174
}
157175
158176
.tooltip.top:after {
@@ -165,7 +183,10 @@
165183
.tooltip.left {
166184
left: 0;
167185
top: 50%;
168-
transform: translate(calc(-100% - var(--tooltip-offset-x)), -50%);
186+
transform: translate(
187+
calc(-100% - var(--tooltip-offset-x)),
188+
calc(-50% - var(--tooltip-offset-y))
189+
);
169190
}
170191
171192
.tooltip.left:after {
@@ -178,7 +199,10 @@
178199
.tooltip.right {
179200
right: 0;
180201
top: 50%;
181-
transform: translate(calc(100% + var(--tooltip-offset-x)), -50%);
202+
transform: translate(
203+
calc(100% + var(--tooltip-offset-x)),
204+
calc(-50% - var(--tooltip-offset-y))
205+
);
182206
}
183207
184208
.tooltip.right:after {
@@ -254,106 +278,151 @@
254278
.tooltip.left.animation-puff {
255279
filter: blur(2px);
256280
opacity: 0;
257-
transform: translate(calc(-100% - var(--tooltip-offset-x)), -50%) scale(2, 2);
281+
transform: translate(
282+
calc(-100% - var(--tooltip-offset-x)),
283+
calc(-50% - var(--tooltip-offset-y))
284+
) scale(2, 2);
258285
transform-origin: 50% 50%;
259286
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
260287
}
261288
262289
.tooltip.left.animation-puff.show {
263290
filter: blur(0);
264291
opacity: 1;
265-
transform: translate(calc(-100% - var(--tooltip-offset-x)), -50%) scale(1, 1);
292+
transform: translate(
293+
calc(-100% - var(--tooltip-offset-x)),
294+
calc(-50% - var(--tooltip-offset-y))
295+
) scale(1, 1);
266296
}
267297
268298
.tooltip.right.animation-puff {
269299
filter: blur(2px);
270300
opacity: 0;
271-
transform: translate(calc(100% + var(--tooltip-offset-x)), -50%) scale(2, 2);
301+
transform: translate(
302+
calc(100% + var(--tooltip-offset-x)),
303+
calc(-50% - var(--tooltip-offset-y))
304+
) scale(2, 2);
272305
transform-origin: 50% 50%;
273306
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
274307
}
275308
276309
.tooltip.right.animation-puff.show {
277310
filter: blur(0);
278311
opacity: 1;
279-
transform: translate(calc(100% + var(--tooltip-offset-x)), -50%) scale(1, 1);
312+
transform: translate(
313+
calc(100% + var(--tooltip-offset-x)),
314+
calc(-50% - var(--tooltip-offset-y))
315+
) scale(1, 1);
280316
}
281317
282318
.tooltip.top.animation-puff {
283319
filter: blur(2px);
284320
opacity: 0;
285-
transform: translate(-50%, calc(-100% - var(--tooltip-offset-y))) scale(2, 2);
321+
transform: translate(
322+
calc(-50% + var(--tooltip-offset-x)),
323+
calc(-100% - var(--tooltip-offset-y))
324+
) scale(2, 2);
286325
transform-origin: 50% 50%;
287326
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
288327
}
289328
290329
.tooltip.top.animation-puff.show {
291330
filter: blur(0);
292331
opacity: 1;
293-
transform: translate(-50%, calc(-100% - var(--tooltip-offset-y))) scale(1, 1);
332+
transform: translate(
333+
calc(-50% + var(--tooltip-offset-x)),
334+
calc(-100% - var(--tooltip-offset-y))
335+
) scale(1, 1);
294336
}
295337
296338
.tooltip.bottom.animation-puff {
297339
filter: blur(2px);
298340
opacity: 0;
299-
transform: translate(-50%, calc(100% + var(--tooltip-offset-y))) scale(2, 2);
341+
transform: translate(
342+
calc(-50% + var(--tooltip-offset-x)),
343+
calc(100% + var(--tooltip-offset-y))
344+
) scale(2, 2);
300345
transform-origin: 50% 50%;
301346
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
302347
}
303348
304349
.tooltip.bottom.animation-puff.show {
305350
filter: blur(0);
306351
opacity: 1;
307-
transform: translate(-50%, calc(100% + var(--tooltip-offset-y))) scale(1, 1);
352+
transform: translate(
353+
calc(-50% + var(--tooltip-offset-x)),
354+
calc(100% + var(--tooltip-offset-y))
355+
) scale(1, 1);
308356
}
309357
310358
/* Bounce */
311359
312360
.tooltip.left.animation-bounce {
313361
opacity: 0;
314-
transform: translate(calc(-100% - var(--tooltip-offset-x)), -50%) scale(1.2, 1.2);
362+
transform: translate(
363+
calc(-100% - var(--tooltip-offset-x)),
364+
calc(-50% + var(--tooltip-offset-y))
365+
) scale(1.2, 1.2);
315366
transform-origin: 50% 50%;
316367
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
317368
}
318369
319370
.tooltip.left.animation-bounce.show {
320371
opacity: 1;
321-
transform: translate(calc(-100% - var(--tooltip-offset-x)), -50%) scale(1, 1);
372+
transform: translate(
373+
calc(-100% - var(--tooltip-offset-x)),
374+
calc(-50% + var(--tooltip-offset-y))
375+
) scale(1, 1);
322376
}
323377
324378
.tooltip.right.animation-bounce {
325379
opacity: 0;
326-
transform: translate(calc(100% + var(--tooltip-offset-x)), -50%) scale(1.2, 1.2);
380+
transform: translate(calc(100% + var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1.2, 1.2);
327381
transform-origin: 50% 50%;
328382
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
329383
}
330384
331385
.tooltip.right.animation-bounce.show {
332386
opacity: 1;
333-
transform: translate(calc(100% + var(--tooltip-offset-x)), -50%) scale(1, 1);
387+
transform: translate(
388+
calc(100% + var(--tooltip-offset-x)),
389+
calc(-50% + var(--tooltip-offset-y))
390+
) scale(1, 1);
334391
}
335392
336393
.tooltip.top.animation-bounce {
337394
opacity: 0;
338-
transform: translate(-50%, calc(-100% - var(--tooltip-offset-y))) scale(1.2, 1.2);
395+
transform: translate(
396+
calc(-50% + var(--tooltip-offset-x)),
397+
calc(-100% - var(--tooltip-offset-y))
398+
) scale(1.2, 1.2);
339399
transform-origin: 50% 50%;
340400
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
341401
}
342402
343403
.tooltip.top.animation-bounce.show {
344404
opacity: 1;
345-
transform: translate(-50%, calc(-100% - var(--tooltip-offset-y))) scale(1, 1);
405+
transform: translate(
406+
calc(-50% + var(--tooltip-offset-x)),
407+
calc(-100% - var(--tooltip-offset-y))
408+
) scale(1, 1);
346409
}
347410
348411
.tooltip.bottom.animation-bounce {
349412
opacity: 0;
350-
transform: translate(-50%, calc(100% + var(--tooltip-offset-y))) scale(1.2, 1.2);
413+
transform: translate(
414+
calc(-50% + var(--tooltip-offset-x)),
415+
calc(100% + var(--tooltip-offset-y))
416+
) scale(1.2, 1.2);
351417
transform-origin: 50% 50%;
352418
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
353419
}
354420
355421
.tooltip.bottom.animation-bounce.show {
356422
opacity: 1;
357-
transform: translate(-50%, calc(100% + var(--tooltip-offset-y))) scale(1, 1);
423+
transform: translate(
424+
calc(-50% + var(--tooltip-offset-x)),
425+
calc(100% + var(--tooltip-offset-y))
426+
) scale(1, 1);
358427
}
359428
</style>

0 commit comments

Comments
 (0)