Fix tooltip position for elements on the right side of the screen [publish]

Author: ArnaudBarre

.github/workflows/publish.yml

@@ -8,9 +8,10 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ contains(github.event.head_commit.message, '[publish]') }}
     steps:
-      - uses: actions/checkout@v2
-      - uses: xhyrom/[email protected]
-      - run: rm -rf ~/.bun/install/cache
+      - uses: actions/checkout@v3
+      - uses: xhyrom/[email protected]
+        with:
+          bun-version: "0.2.1"
       - run: bun install
       - run: bun ci
       - uses: ArnaudBarre/[email protected]

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.1
+
+Fix tooltip position for elements on the right side of the screen
+
 ## 1.0.0
 
 Initial release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-react-click-to-component",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "scripts": {
     "dev": "scripts/bundle.ts --dev",

playground/src/App.css

@@ -39,3 +39,12 @@
 .read-the-docs {
   color: #888;
 }
+
+.full-height {
+  position: fixed;
+  top: 20px;
+  bottom: 20px;
+  left: 40px;
+  display: flex;
+  align-items: center;
+}

playground/src/App.tsx

@@ -7,6 +7,8 @@ export const App = () => {
 
   return (
     <div className="App">
+      <div style={{ position: "fixed", right: 40, top: 40 }}>Top right</div>
+      <div className="full-height">Full height</div>
       <div>
         <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
           <img src="/vite.svg" className="logo" alt="Vite logo" />

src/client.ts

@@ -72,7 +72,7 @@ window.addEventListener("mousemove", (event) => {
     tooltipElement.style.left = `${rect.left}px`;
     tooltipElement.style.right = "";
   } else {
-    tooltipElement.style.right = `${rect.right}px`;
+    tooltipElement.style.right = `${window.innerWidth - rect.right}px`;
     tooltipElement.style.left = "";
   }
   if (!hasTooltip) {