Adds float visibility

resources/.~lock.sample-ledger.csv#

@@ -0,0 +1 @@
+,noti,pop-os,24.08.2024 23:11,file:///home/noti/.config/libreoffice/4;

resources/public/js/alpine-vals.js

@@ -42,4 +42,27 @@ 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'])
+
+    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')
+        }
+        
+    })
+    cleanup(() => {popper.destroy(); source.removeEventListener('mouseover', show); source.removeEventListener('mouseout', hide) })
+    })
 })