Skip to content

Commit

Permalink
Merge pull request #5 from svelte-plugins/fix-offets
Browse files Browse the repository at this point in the history
fix(offsets): properly calc position using both x and y offsets
  • Loading branch information
dysfunc authored Oct 19, 2022
2 parents 8eafe54 + c838fe9 commit 23acbf2
Show file tree
Hide file tree
Showing 4 changed files with 182 additions and 44 deletions.
2 changes: 1 addition & 1 deletion docs/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@svelte-plugins/tooltips",
"version": "0.1.5",
"version": "0.1.6",
"license": "MIT",
"description": "A simple tooltip action and component designed for Svelte.",
"author": "Kieran Boyle (https://github.com/dysfunc)",
Expand Down
109 changes: 89 additions & 20 deletions src/action-tooltip.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -136,10 +136,25 @@
border: 0 !important;
}
.tooltip.bottom,
.tooltip.top {
--tooltip-offset-x: 0px;
--tooltip-offset-y: 12px;
}
.tooltip.left,
.tooltip.right {
--tooltip-offset-x: 12px;
--tooltip-offset-y: 0px;
}
.tooltip.bottom {
bottom: 0;
left: 50%;
transform: translate(-50%, calc(100% + var(--tooltip-offset-y)));
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
);
}
.tooltip.bottom:after {
Expand All @@ -152,7 +167,10 @@
.tooltip.top {
left: 50%;
top: 0;
transform: translate(-50%, calc(-100% - var(--tooltip-offset-y)));
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
);
}
.tooltip.top:after {
Expand All @@ -165,7 +183,10 @@
.tooltip.left {
left: 0;
top: 50%;
transform: translate(calc(-100% - var(--tooltip-offset-x)), -50%);
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
);
}
.tooltip.left:after {
Expand All @@ -178,7 +199,10 @@
.tooltip.right {
right: 0;
top: 50%;
transform: translate(calc(100% + var(--tooltip-offset-x)), -50%);
transform: translate(
calc(100% + var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
);
}
.tooltip.right:after {
Expand Down Expand Up @@ -254,106 +278,151 @@
.tooltip.left.animation-puff {
filter: blur(2px);
opacity: 0;
transform: translate(calc(-100% - var(--tooltip-offset-x)), -50%) scale(2, 2);
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
) scale(2, 2);
transform-origin: 50% 50%;
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.tooltip.left.animation-puff.show {
filter: blur(0);
opacity: 1;
transform: translate(calc(-100% - var(--tooltip-offset-x)), -50%) scale(1, 1);
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
) scale(1, 1);
}
.tooltip.right.animation-puff {
filter: blur(2px);
opacity: 0;
transform: translate(calc(100% + var(--tooltip-offset-x)), -50%) scale(2, 2);
transform: translate(
calc(100% + var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
) scale(2, 2);
transform-origin: 50% 50%;
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.tooltip.right.animation-puff.show {
filter: blur(0);
opacity: 1;
transform: translate(calc(100% + var(--tooltip-offset-x)), -50%) scale(1, 1);
transform: translate(
calc(100% + var(--tooltip-offset-x)),
calc(-50% - var(--tooltip-offset-y))
) scale(1, 1);
}
.tooltip.top.animation-puff {
filter: blur(2px);
opacity: 0;
transform: translate(-50%, calc(-100% - var(--tooltip-offset-y))) scale(2, 2);
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
) scale(2, 2);
transform-origin: 50% 50%;
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.tooltip.top.animation-puff.show {
filter: blur(0);
opacity: 1;
transform: translate(-50%, calc(-100% - var(--tooltip-offset-y))) scale(1, 1);
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
) scale(1, 1);
}
.tooltip.bottom.animation-puff {
filter: blur(2px);
opacity: 0;
transform: translate(-50%, calc(100% + var(--tooltip-offset-y))) scale(2, 2);
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
) scale(2, 2);
transform-origin: 50% 50%;
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.tooltip.bottom.animation-puff.show {
filter: blur(0);
opacity: 1;
transform: translate(-50%, calc(100% + var(--tooltip-offset-y))) scale(1, 1);
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
) scale(1, 1);
}
/* Bounce */
.tooltip.left.animation-bounce {
opacity: 0;
transform: translate(calc(-100% - var(--tooltip-offset-x)), -50%) scale(1.2, 1.2);
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% + var(--tooltip-offset-y))
) scale(1.2, 1.2);
transform-origin: 50% 50%;
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
}
.tooltip.left.animation-bounce.show {
opacity: 1;
transform: translate(calc(-100% - var(--tooltip-offset-x)), -50%) scale(1, 1);
transform: translate(
calc(-100% - var(--tooltip-offset-x)),
calc(-50% + var(--tooltip-offset-y))
) scale(1, 1);
}
.tooltip.right.animation-bounce {
opacity: 0;
transform: translate(calc(100% + var(--tooltip-offset-x)), -50%) scale(1.2, 1.2);
transform: translate(calc(100% + var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1.2, 1.2);
transform-origin: 50% 50%;
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
}
.tooltip.right.animation-bounce.show {
opacity: 1;
transform: translate(calc(100% + var(--tooltip-offset-x)), -50%) scale(1, 1);
transform: translate(
calc(100% + var(--tooltip-offset-x)),
calc(-50% + var(--tooltip-offset-y))
) scale(1, 1);
}
.tooltip.top.animation-bounce {
opacity: 0;
transform: translate(-50%, calc(-100% - var(--tooltip-offset-y))) scale(1.2, 1.2);
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
) scale(1.2, 1.2);
transform-origin: 50% 50%;
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
}
.tooltip.top.animation-bounce.show {
opacity: 1;
transform: translate(-50%, calc(-100% - var(--tooltip-offset-y))) scale(1, 1);
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(-100% - var(--tooltip-offset-y))
) scale(1, 1);
}
.tooltip.bottom.animation-bounce {
opacity: 0;
transform: translate(-50%, calc(100% + var(--tooltip-offset-y))) scale(1.2, 1.2);
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
) scale(1.2, 1.2);
transform-origin: 50% 50%;
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
}
.tooltip.bottom.animation-bounce.show {
opacity: 1;
transform: translate(-50%, calc(100% + var(--tooltip-offset-y))) scale(1, 1);
transform: translate(
calc(-50% + var(--tooltip-offset-x)),
calc(100% + var(--tooltip-offset-y))
) scale(1, 1);
}
</style>
Loading

0 comments on commit 23acbf2

Please sign in to comment.