From 577a5ee726a7f12c7ffd1bd44694cce9ada3ff8c Mon Sep 17 00:00:00 2001
From: Kieran Boyle <norcal.kieran@gmail.com>
Date: Sun, 17 Dec 2023 17:56:01 -0800
Subject: [PATCH] fix(positioning): add support for transform and fix bug with
 relative

---
 docs/package-lock.json |  2 +-
 docs/src/App.svelte    |  8 ++++++--
 package.json           |  2 +-
 src/helpers.js         | 13 +++++++++++++
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/docs/package-lock.json b/docs/package-lock.json
index 7a8ce0f..abe8988 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -17,7 +17,7 @@
     },
     "..": {
       "name": "@svelte-plugins/tooltips",
-      "version": "2.0.1",
+      "version": "2.1.0",
       "dev": true,
       "license": "MIT",
       "devDependencies": {
diff --git a/docs/src/App.svelte b/docs/src/App.svelte
index 6960eea..fc16369 100644
--- a/docs/src/App.svelte
+++ b/docs/src/App.svelte
@@ -16,13 +16,13 @@
 
    <h2>Examples using action</h2>
 
-  <div class="example">
+  <div class="example relative">
     <p>This tooltip should appear on the <u title="hello world!" action="click"  use:tooltip>top</u> when clicked. The content for the tooltip is provided by the <code>title</code> attribute.</p>
 
     <Prism code={'<u title="hello world!" action="click" use:tooltip>top</u>'} />
   </div>
 
-  <div class="example">
+  <div class="example relative">
     <p>This tooltip should appear on the <i use:tooltip={{ content: '<b>Tooltip Top</b><p>This is an example of using HTML and content wrapping.</p>', position: 'top', animation: 'slide', arrow: false }}>top</i>.</p>
 
     <Prism code={"<i use:tooltip={{ content: '<b>Tooltip Top</b><p>This is an example of using HTML and content wrapping.</p>', position: 'top', animation: 'slide', arrow: false }}>top</i>"} />
@@ -262,6 +262,10 @@
     margin-bottom: 40px;
   }
 
+  .example.relative {
+    position: relative;
+  }
+
   :global(.tooltip.tooltip-theme) {
     --tooltip-background-color: hotpink;
     --tooltip-box-shadow: 0 1px 8px pink;
diff --git a/package.json b/package.json
index cd3d5fc..70f69aa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@svelte-plugins/tooltips",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "license": "MIT",
   "description": "A simple tooltip action and component designed for Svelte.",
   "author": "Kieran Boyle (https://github.com/dysfunc)",
diff --git a/src/helpers.js b/src/helpers.js
index e662de3..a68e24a 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -69,6 +69,19 @@ export const computeTooltipPosition = (containerRef, tooltipRef, position, coord
     } else if (elementPosition === 'absolute' || elementPosition === 'relative') {
       cumulativeOffsetTop -= parseFloat(computedStyle.top) || 0;
       cumulativeOffsetLeft -= parseFloat(computedStyle.left) || 0;
+
+      if (elementPosition === 'relative') {
+        cumulativeOffsetTop -= currentElement.offsetTop;
+        cumulativeOffsetLeft -= currentElement.offsetLeft;
+      }
+    }
+
+    const transform = computedStyle.transform;
+
+    if (transform && transform !== 'none') {
+      const transformMatrix = new DOMMatrix(transform);
+      cumulativeOffsetTop -= transformMatrix.m42;
+      cumulativeOffsetLeft -= transformMatrix.m41;
     }
 
     currentElement = currentElement.parentElement;