Merge pull request #30 from svelte-plugins/positioning

🐛 fix(positioning): add support for transform and fix bug with relative

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;

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)",

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;