Skip to content

Commit 55692bd

Browse files
dysfuncdysfunc
authored
Merge pull request #32 from svelte-plugins/resizing
 🐛 refactor(tooltips): adjust positioning of tooltip during resize
2 parents 1892692 + 1a0e0ea commit 55692bd

File tree

6 files changed

+146
-185
lines changed

6 files changed

+146
-185
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": "2.1.1",
3+
"version": "2.2.0",
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.snap.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`Components: Tooltip > should render the component 1`] = `
44
<body>
55
<div>
66
<div
7-
class="tooltip animation-null top svelte-hla1ha"
7+
class="tooltip animation-null top svelte-ngud14"
88
style="left: 0px; min-width: 0px; max-width: 200px; text-align: left; top: 0px;"
99
>
1010
Hello World!

‎src/action-tooltip.svelte

Lines changed: 69 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,12 @@
110110
}
111111
});
112112
113+
const onHandleResize = () => {
114+
if (visible) {
115+
coords = computeTooltipPosition(targetElement, tooltipRef, position, coords);
116+
}
117+
};
118+
113119
$: isComponent = typeof content === 'object';
114120
$: tooltipRef && show ? setTimeout(() => (visible = true), animationDelay) : (visible = false);
115121
</script>
@@ -120,13 +126,16 @@
120126
class="tooltip animation-{animationEffect} {position} {theme}"
121127
class:show={visible}
122128
class:arrowless={!arrow}
123-
style="bottom: auto; right: auto; left: {coords.left}px; min-width: {minWidth}px; max-width: {maxWidth}px; text-align: {align}; top: {coords.top}px;">
129+
style="bottom: auto; right: auto; left: {coords.left}px; min-width: {minWidth}px; max-width: {maxWidth}px; text-align: {align}; top: {coords.top}px;"
130+
>
124131
{#if !isComponent}
125132
{@html content}
126133
{/if}
127134
</div>
128135
{/if}
129136

137+
<svelte:window on:resize={onHandleResize} />
138+
130139
<style>
131140
/*--------------------------*
132141
* Theme Variables
@@ -210,10 +219,7 @@
210219
.tooltip.bottom {
211220
bottom: 0;
212221
left: 50%;
213-
transform: translate(
214-
calc(-50% + var(--tooltip-offset-x)),
215-
calc(100% + var(--tooltip-offset-y))
216-
);
222+
transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y)));
217223
}
218224
219225
.tooltip.bottom:after {
@@ -226,10 +232,7 @@
226232
.tooltip.top {
227233
left: 50%;
228234
top: 0;
229-
transform: translate(
230-
calc(-50% + var(--tooltip-offset-x)),
231-
calc(-100% - var(--tooltip-offset-y))
232-
);
235+
transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y)));
233236
}
234237
235238
.tooltip.top:after {
@@ -242,10 +245,7 @@
242245
.tooltip.left {
243246
left: 0;
244247
top: 50%;
245-
transform: translate(
246-
calc(-100% - var(--tooltip-offset-x)),
247-
calc(-50% - var(--tooltip-offset-y))
248-
);
248+
transform: translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y)));
249249
}
250250
251251
.tooltip.left:after {
@@ -258,10 +258,7 @@
258258
.tooltip.right {
259259
right: 0;
260260
top: 50%;
261-
transform: translate(
262-
calc(100% + var(--tooltip-offset-x)),
263-
calc(-50% - var(--tooltip-offset-y))
264-
);
261+
transform: translate(calc(100% + var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y)));
265262
}
266263
267264
.tooltip.right:after {
@@ -291,7 +288,9 @@
291288
.tooltip.top.animation-slide {
292289
margin-top: 10px;
293290
opacity: 0;
294-
transition: opacity 0.25s ease-in-out, margin 0.25s ease-in-out;
291+
transition:
292+
opacity 0.25s ease-in-out,
293+
margin 0.25s ease-in-out;
295294
}
296295
297296
.tooltip.top.animation-slide.show {
@@ -302,7 +301,9 @@
302301
.tooltip.bottom.animation-slide {
303302
margin-bottom: 20px;
304303
opacity: 0;
305-
transition: opacity 0.25s ease-in-out, margin 0.25s ease-in-out;
304+
transition:
305+
opacity 0.25s ease-in-out,
306+
margin 0.25s ease-in-out;
306307
}
307308
308309
.tooltip.bottom.animation-slide.show {
@@ -313,7 +314,9 @@
313314
.tooltip.right.animation-slide {
314315
margin-right: 20px;
315316
opacity: 0;
316-
transition: opacity 0.25s ease-in-out, margin 0.25s ease-in-out;
317+
transition:
318+
opacity 0.25s ease-in-out,
319+
margin 0.25s ease-in-out;
317320
}
318321
319322
.tooltip.right.animation-slide.show {
@@ -324,7 +327,9 @@
324327
.tooltip.left.animation-slide {
325328
margin-left: 20px;
326329
opacity: 0;
327-
transition: opacity 0.25s ease-in-out, margin 0.25s ease-in-out;
330+
transition:
331+
opacity 0.25s ease-in-out,
332+
margin 0.25s ease-in-out;
328333
}
329334
330335
.tooltip.left.animation-slide.show {
@@ -337,151 +342,126 @@
337342
.tooltip.left.animation-puff {
338343
filter: blur(2px);
339344
opacity: 0;
340-
transform: translate(
341-
calc(-100% - var(--tooltip-offset-x)),
342-
calc(-50% - var(--tooltip-offset-y))
343-
) scale(2, 2);
345+
transform: translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(2, 2);
344346
transform-origin: 50% 50%;
345-
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
347+
transition:
348+
opacity 0.25s ease-in-out,
349+
filter 0.25s ease-in-out,
350+
transform 0.25s ease-in-out;
346351
}
347352
348353
.tooltip.left.animation-puff.show {
349354
filter: blur(0);
350355
opacity: 1;
351-
transform: translate(
352-
calc(-100% - var(--tooltip-offset-x)),
353-
calc(-50% - var(--tooltip-offset-y))
354-
) scale(1, 1);
356+
transform: translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(1, 1);
355357
}
356358
357359
.tooltip.right.animation-puff {
358360
filter: blur(2px);
359361
opacity: 0;
360-
transform: translate(
361-
calc(100% + var(--tooltip-offset-x)),
362-
calc(-50% - var(--tooltip-offset-y))
363-
) scale(2, 2);
362+
transform: translate(calc(100% + var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(2, 2);
364363
transform-origin: 50% 50%;
365-
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
364+
transition:
365+
opacity 0.25s ease-in-out,
366+
filter 0.25s ease-in-out,
367+
transform 0.25s ease-in-out;
366368
}
367369
368370
.tooltip.right.animation-puff.show {
369371
filter: blur(0);
370372
opacity: 1;
371-
transform: translate(
372-
calc(100% + var(--tooltip-offset-x)),
373-
calc(-50% - var(--tooltip-offset-y))
374-
) scale(1, 1);
373+
transform: translate(calc(100% + var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(1, 1);
375374
}
376375
377376
.tooltip.top.animation-puff {
378377
filter: blur(2px);
379378
opacity: 0;
380-
transform: translate(
381-
calc(-50% + var(--tooltip-offset-x)),
382-
calc(-100% - var(--tooltip-offset-y))
383-
) scale(2, 2);
379+
transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(2, 2);
384380
transform-origin: 50% 50%;
385-
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
381+
transition:
382+
opacity 0.25s ease-in-out,
383+
filter 0.25s ease-in-out,
384+
transform 0.25s ease-in-out;
386385
}
387386
388387
.tooltip.top.animation-puff.show {
389388
filter: blur(0);
390389
opacity: 1;
391-
transform: translate(
392-
calc(-50% + var(--tooltip-offset-x)),
393-
calc(-100% - var(--tooltip-offset-y))
394-
) scale(1, 1);
390+
transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(1, 1);
395391
}
396392
397393
.tooltip.bottom.animation-puff {
398394
filter: blur(2px);
399395
opacity: 0;
400-
transform: translate(
401-
calc(-50% + var(--tooltip-offset-x)),
402-
calc(100% + var(--tooltip-offset-y))
403-
) scale(2, 2);
396+
transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(2, 2);
404397
transform-origin: 50% 50%;
405-
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
398+
transition:
399+
opacity 0.25s ease-in-out,
400+
filter 0.25s ease-in-out,
401+
transform 0.25s ease-in-out;
406402
}
407403
408404
.tooltip.bottom.animation-puff.show {
409405
filter: blur(0);
410406
opacity: 1;
411-
transform: translate(
412-
calc(-50% + var(--tooltip-offset-x)),
413-
calc(100% + var(--tooltip-offset-y))
414-
) scale(1, 1);
407+
transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(1, 1);
415408
}
416409
417410
/* Bounce */
418411
419412
.tooltip.left.animation-bounce {
420413
opacity: 0;
421-
transform: translate(
422-
calc(-100% - var(--tooltip-offset-x)),
423-
calc(-50% + var(--tooltip-offset-y))
424-
) scale(1.2, 1.2);
414+
transform: translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1.2, 1.2);
425415
transform-origin: 50% 50%;
426-
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
416+
transition:
417+
opacity 0.25s ease-in-out,
418+
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
427419
}
428420
429421
.tooltip.left.animation-bounce.show {
430422
opacity: 1;
431-
transform: translate(
432-
calc(-100% - var(--tooltip-offset-x)),
433-
calc(-50% + var(--tooltip-offset-y))
434-
) scale(1, 1);
423+
transform: translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1, 1);
435424
}
436425
437426
.tooltip.right.animation-bounce {
438427
opacity: 0;
439428
transform: translate(calc(100% + var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1.2, 1.2);
440429
transform-origin: 50% 50%;
441-
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
430+
transition:
431+
opacity 0.25s ease-in-out,
432+
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
442433
}
443434
444435
.tooltip.right.animation-bounce.show {
445436
opacity: 1;
446-
transform: translate(
447-
calc(100% + var(--tooltip-offset-x)),
448-
calc(-50% + var(--tooltip-offset-y))
449-
) scale(1, 1);
437+
transform: translate(calc(100% + var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1, 1);
450438
}
451439
452440
.tooltip.top.animation-bounce {
453441
opacity: 0;
454-
transform: translate(
455-
calc(-50% + var(--tooltip-offset-x)),
456-
calc(-100% - var(--tooltip-offset-y))
457-
) scale(1.2, 1.2);
442+
transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(1.2, 1.2);
458443
transform-origin: 50% 50%;
459-
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
444+
transition:
445+
opacity 0.25s ease-in-out,
446+
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
460447
}
461448
462449
.tooltip.top.animation-bounce.show {
463450
opacity: 1;
464-
transform: translate(
465-
calc(-50% + var(--tooltip-offset-x)),
466-
calc(-100% - var(--tooltip-offset-y))
467-
) scale(1, 1);
451+
transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(1, 1);
468452
}
469453
470454
.tooltip.bottom.animation-bounce {
471455
opacity: 0;
472-
transform: translate(
473-
calc(-50% + var(--tooltip-offset-x)),
474-
calc(100% + var(--tooltip-offset-y))
475-
) scale(1.2, 1.2);
456+
transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(1.2, 1.2);
476457
transform-origin: 50% 50%;
477-
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
458+
transition:
459+
opacity 0.25s ease-in-out,
460+
transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
478461
}
479462
480463
.tooltip.bottom.animation-bounce.show {
481464
opacity: 1;
482-
transform: translate(
483-
calc(-50% + var(--tooltip-offset-x)),
484-
calc(100% + var(--tooltip-offset-y))
485-
) scale(1, 1);
465+
transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(1, 1);
486466
}
487467
</style>

‎src/tooltip.snap.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ exports[`Components: Tooltip > should render the component 1`] = `
88
/>
99
1010
<div
11-
class="tooltip animation-null top svelte-1fqbu6l"
11+
class="tooltip animation-null top svelte-ir0j5h"
1212
style="left: 0px; min-width: 0px; max-width: 200px; text-align: left; top: 0px;"
1313
>
1414
Hello World!

0 commit comments

Comments
 (0)