fixes a couple loading issues, starts on report rendering.

resources/public/js/alpine-vals.js

@@ -42,27 +42,26 @@ Alpine.directive('hx-header', (el, { value, expression }, { evaluateLater, effec
           cleanup(onDestroy);
         }
       );
-Alpine.directive('popper', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate, Alpine}) => {
-    let dependent_properties = evaluate(expression)
-    let tooltip = evaluate(dependent_properties['tooltip'])
-    let source = evaluate(dependent_properties['source'])
+    Alpine.data('popper', () => ({
+        show: false,
+        popper: null,
+        init() {
+            this.$nextTick(() => this.popper = Popper.createPopper(this.$refs.source, this.$refs.tooltip,
+                        { placement: 'bottom', strategy: 'fixed', modifiers: [{ name: 'preventOverflow' }, { name: 'offset', options: { offset: [0, 10] } }] }))
+            let reveal = () => {
+                if (!this.show) {
+                    this.show = true;
+                }
+            };
+            let hide = () => this.show = false;
+            this.$refs.source.addEventListener('mouseover', reveal)
+            this.$refs.source.addEventListener('mouseout', hide)
+        },
+        tooltip: {
 
-    let popper = Popper.createPopper(source, tooltip, {placement: 'bottom', strategy: 'fixed', modifiers: [{name: 'preventOverflow'}, {name: 'offset', options: {offset: [0, 10]}}]});;
-    let d=Alpine.reactive({show: false});
-    tooltip.classList.add('opacity-0', 'transition-opacity')
-
-    let show = () => d.show = true;
-    let  hide = () => d.show = false;
-    source.addEventListener('mouseover', show)
-    source.addEventListener('mouseout', hide)
-    effect(() => {
-        if (d.show) {
-            tooltip.classList.remove('opacity-0')
-        } else {
-            tooltip.classList.add('opacity-0')
+            [':class']() { return { 'opacity-0': !this.show, 'opacity-100': this.show, 'pointer-events-none': !this.show, 'transition': true } },
+            ["x-ref"]: 'tooltip',
+            ['x-transition']: true
         }
-        
-    })
-    cleanup(() => {popper.destroy(); source.removeEventListener('mouseover', show); source.removeEventListener('mouseout', hide) })
-    })
-}) 
+    }))
+})