Adds float visibility

src/clj/auto_ap/ssr/invoices.clj

@@ -382,9 +382,7 @@
             :hx-get (bidi/path-for ssr-routes/only-routes
                                    ::route/pay-wizard)
             :hx-trigger "click from:#pay-button"
-            :x-data (hx/json {:popper nil
-                              :hovering false})
-            "x-init" "popper = Popper.createPopper($refs.button, $refs.tooltip, {placement: 'bottom', strategy: 'fixed', modifiers: [{name: 'preventOverflow'}, {name: 'offset', options: {offset: [0, 10]}}]});"}
+            :x-popper (hx/json {:source "$refs.button", :tooltip "$refs.tooltip"}) }
      (com/button {:color :primary
                   :id "pay-button"
                   :disabled (or (= (count (:ids params)) 0)
@@ -395,8 +393,6 @@
                   :hx-get (bidi/path-for ssr-routes/only-routes ::route/pay-button)
                   :hx-swap "outerHTML"
                   :hx-trigger "selectedChanged from:body, htmx:afterSwap from:#entity-table"
-                  "@mouseover" "hovering=true; $nextTick(() => popper.update())"
-                  "@mouseout" "hovering=false;"
                   :x-ref "button"
                   :minimal-loading? true
                   :class "relative"}
@@ -409,24 +405,21 @@
                  (when (or (= 0 (count ids))
                            (> selected-client-count 1))
                    (com/badge {} "!")))
-     [:div (hx/alpine-appear {:x-ref "tooltip"
+     (com/tooltip {:x-ref "tooltip" }
+                  (cond
+                    (not all-credits-or-debits)
+                    [:div "All vendor totals must be either positive or negative."]
+                    (and (= 0 (count ids))
+                         (not= (count (:ids params))
+                               0))
+                    [:div "No " [:span.font-bold "payable"] " invoices selected."]
 
-                              :x-show "hovering"
-                              :class "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-2xl w-max z-50 p-4"})
-      (cond
-        (not all-credits-or-debits)
-        [:div "All vendor totals must be either positive or negative."]
-        (and (= 0 (count ids))
-             (not= (count (:ids params))
-                   0))
-        [:div "No " [:span.font-bold "payable"] " invoices selected."]
-
-        (= 0 (count ids))
-        [:div "Please select some invoices to pay"]
-        (> selected-client-count 1)
-        [:div "Can only pay for one client at a time"]
-        :else
-        [:div "Click to choose a bank account"])]]))
+                    (= 0 (count ids))
+                    [:div "Please select some invoices to pay"]
+                    (> selected-client-count 1)
+                    [:div "Can only pay for one client at a time"]
+                    :else
+                    [:div "Click to choose a bank account"]))]))
 
 
 (defn pay-button [request]