From c838fe99badd78736ba4472079d4ebc6b1d0c7d1 Mon Sep 17 00:00:00 2001
From: Kieran Boyle <norcal.kieran@gmail.com>
Date: Tue, 18 Oct 2022 12:47:55 -0700
Subject: [PATCH] fix(offsets): properly calc position using both x and y
 offsets

---
 docs/package-lock.json    |   2 +-
 package.json              |   2 +-
 src/action-tooltip.svelte | 109 +++++++++++++++++++++++++++++-------
 src/tooltip.svelte        | 113 ++++++++++++++++++++++++++++++--------
 4 files changed, 182 insertions(+), 44 deletions(-)

diff --git a/docs/package-lock.json b/docs/package-lock.json
index d72c4d4..62fa543 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -18,7 +18,7 @@
     },
     "..": {
       "name": "@svelte-plugins/tooltips",
-      "version": "0.1.5",
+      "version": "0.1.6",
       "dev": true,
       "license": "MIT",
       "devDependencies": {
diff --git a/package.json b/package.json
index 4ebb52e..0b450dc 100644
--- a/package.json
+++ b/package.json
@@ -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)",
diff --git a/src/action-tooltip.svelte b/src/action-tooltip.svelte
index 8e87f15..3d873b9 100644
--- a/src/action-tooltip.svelte
+++ b/src/action-tooltip.svelte
@@ -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 {
@@ -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 {
@@ -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 {
@@ -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 {
@@ -254,7 +278,10 @@
   .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;
   }
@@ -262,13 +289,19 @@
   .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;
   }
@@ -276,13 +309,19 @@
   .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;
   }
@@ -290,13 +329,19 @@
   .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;
   }
@@ -304,56 +349,80 @@
   .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>
diff --git a/src/tooltip.svelte b/src/tooltip.svelte
index 782af09..4919fb2 100644
--- a/src/tooltip.svelte
+++ b/src/tooltip.svelte
@@ -119,8 +119,8 @@
     --tooltip-font-weight: 500;
     --tooltip-line-height: 1.25rem;
     --tooltip-color: #fff;
-    --tooltip-offset-x: 12px;
-    --tooltip-offset-y: 12px;
+    --tooltip-offset-x: 0px;
+    --tooltip-offset-y: 0px;
     --tooltip-padding: 12px;
     --tooltip-z-index: 100;
     --tooltip-arrow-size: 10px;
@@ -172,10 +172,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 {
@@ -188,7 +203,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 {
@@ -201,7 +219,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 {
@@ -214,7 +235,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 {
@@ -290,7 +314,10 @@
   .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;
   }
@@ -298,13 +325,19 @@
   .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;
   }
@@ -312,13 +345,19 @@
   .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;
   }
@@ -326,13 +365,19 @@
   .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;
   }
@@ -340,56 +385,80 @@
   .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>