working moon tooltip

aliases.sh

@@ -1,4 +1,4 @@
-alias npm='docker run -it -u $(id -u):$(id -g) -v "${PWD}/:/app" -w /app node:20 npm'
+alias npm='docker run -it -u $(id -u):$(id -g) -v "${PWD}/:/app" -w /app node:20 npm --legacy-peer-deps'
 alias npx='docker run -it -e AWS_PROFILE=fc -u $(id -u):$(id -g) -v "${PWD}/:/app" -v ~/.aws/:/home/node/.aws -w /app node:20 npx'
 alias node='docker run -it -u $(id -u):$(id -g) -v "${PWD}/:/app" -w /app node:20'
 alias artisan='docker compose exec php php artisan'

package.json

@@ -10,7 +10,6 @@
         "bootstrap": "^4.6.2",
         "laravel-vite-plugin": "^1.0.4",
         "lodash": "^4.17.21",
-        "popper.js": "^1.16.1",
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.57.1",
         "sass-loader": "^12.4.0",
@@ -22,6 +21,7 @@
     },
     "dependencies": {
         "@alpinejs/intersect": "^3.10.5",
+        "@floating-ui/dom": "^1.6.7",
         "@fortawesome/fontawesome-free": "^5.15.4",
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tailwindcss/forms": "^0.5.0",
@@ -36,6 +36,7 @@
         "jquery-ui": "^1.13.3",
         "mustache": "^3.2.1",
         "notifyjs": "^3.0.0",
+        "popper.js": "^1.16.1",
         "postcss": "^8.4.21",
         "progressbar.js": "^1.1.1",
         "protip": "^1.4.21",

resources/js/app.js

@@ -17,8 +17,6 @@ window.$.notify = (name, detail = {}) => {
     }));
 }
 
-import Popper from 'popper.js';
-
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
@@ -307,32 +305,8 @@ Alpine.data('MainApp', () => ({
     }
 }));
 
-Alpine.data('moon_tooltip', () => ({
-    element: false,
-    title: "",
-    show: false,
-
-    init: function() {
-        this.tooltip_box = $('#moon_tooltip_box');
-    },
-
-    set_popper: function() {
-        if (this.element) {
-            this.popper = new Popper(this.element, this.tooltip_box, {
-                placement: 'top',
-                modifiers: {
-                    preventOverflow: {
-                        boundariesElement: $('#calendar')[0],
-                    },
-                    offset: {
-                        enabled: true,
-                        offset: '0, 5px'
-                    }
-                }
-            });
-        }
-    }
-}));
+import MoonTooltip from './calendar-moon-tooltip.js';
+Alpine.data('moon_tooltip', MoonTooltip);
 
 window.calendar_weather = {
 
@@ -532,18 +506,18 @@ window.calendar_weather = {
 
             if ((window.calendar_weather.processed_weather && !icon.hasClass('noweather')) || icon.hasClass('moon_popup')) {
 
-                this.popper = new Popper(icon, this.weather_tooltip_box, {
-                    placement: 'top',
-                    modifiers: {
-                        preventOverflow: {
-                            boundariesElement: $('#calendar')[0],
-                        },
-                        offset: {
-                            enabled: true,
-                            offset: '0, 14px'
-                        }
-                    }
-                });
+                // this.popper = new Popper(icon, this.weather_tooltip_box, {
+                //     placement: 'top',
+                //     modifiers: {
+                //         preventOverflow: {
+                //             boundariesElement: $('#calendar')[0],
+                //         },
+                //         offset: {
+                //             enabled: true,
+                //             offset: '0, 14px'
+                //         }
+                //     }
+                // });
 
                 this.weather_tooltip_box.show();
 

resources/js/calendar-moon-tooltip.js

@@ -0,0 +1,36 @@
+import {
+    computePosition,
+    flip,
+    shift,
+} from "@floating-ui/dom";
+
+export default () => ({
+    element: false,
+    title: "",
+    show: true,
+    x: 0,
+    y: 0,
+    opacity: 0,
+
+    activate: function($event) {
+        this.title = $event.detail.title;
+
+        computePosition(
+            $event.detail.element,
+            this.$refs.moon_tooltip_box,
+            {
+                placement: 'top',
+                middleware: [flip(), shift()],
+            }
+        ).then(({ x, y }) => {
+            this.x = x;
+            this.y = y;
+            this.opacity = 1;
+        });
+    },
+
+    deactivate: function() {
+        this.title = '';
+        this.opacity = 0;
+    }
+});

resources/js/calendar/calendar_day_data_layout.js

@@ -1,5 +1,4 @@
 import { moon_phases } from "./calendar_variables";
-import Popper from "popper.js";
 
 export var day_data_tooltip = {
 

resources/js/jquery.js

@@ -10,8 +10,6 @@ window.jQuery = $;
 
 // import 'jquery-ui';
 
-import Popper from 'popper.js';
-window.Popper = Popper;
 
 import 'chart.js';
 import 'notifyjs';

resources/sass/calendar/tooltips.scss

@@ -64,13 +64,14 @@
 /* ------------------ Moon tooltip Layout ----------------- */
 
 #moon_tooltip_box {
+    width: max-content;
     position: absolute;
+    top: 0;
+    left: 0;
     background: $accent-color;
     color: white;
     text-align: center;
-    top:0;
-    width: fit-content;
-    border-radius: 7px;
+    border-radius: 4px;
     padding:10px;
     font-size:11pt;
     z-index: 299;

resources/views/layouts/moon_tooltip.blade.php

@@ -1,24 +1,13 @@
 <div
 	x-data='moon_tooltip'
-	@moon-mouse-enter.window="
-		element = $event.detail.element;
-		title = $event.detail.title;
-		show = true;
-		$nextTick(() => { set_popper() });
-	"
-	@moon-mouse-leave.window="
-		element = false;
-		title = '';
-		show = false;
-	"
-	@scroll.window="
-		element = false;
-		title = '';
-		show = false;
-	"
-	id='moon_tooltip_box'
+	@moon-mouse-enter.window="activate"
+	@moon-mouse-leave.window="deactivate"
+	@scroll.window="deactivate"
+    id='moon_tooltip_box'
+	x-ref='moon_tooltip_box'
 	x-show="show"
     x-cloak
+    :style="`left: ${x}px; top: ${y}px; opacity: ${opacity}; pointer-events: none;`"
 >
 	<div x-text='title'></div>
 </div>