popper to tippy

src/clj/auto_ap/ssr/components/link_dropdown.clj

@@ -5,20 +5,19 @@
 
 (defn link-dropdown [links]
   (when (> (count links) 0)
-    [:div {:x-data (hx/json {:popper nil
-                             :show false})
-           "@click.outside" "show=false"
+    [:div 
 
-           :x-init "popper = Popper.createPopper($refs.link, $refs.tooltip, {placement: 'bottom', strategy: 'fixed'})"}
-
-     (com/a-icon-button {:x-ref "link" "@click.prevent" "show=!show; $nextTick(() => popper.update());" :class "relative"}
+     (com/a-icon-button {:class "relative"
+                         "@click.prevent" "$tooltip($refs.tooltip, {content: ()=>$refs.tooltip.innerHTML, theme: 'light', allowHTML: true, interactive:true})"
+                         }
                         svg/paperclip
                         (com/badge {:color "blue"} (count links)))
-     [:div.divide-y.divide-gray-200.bg-white.rounded-lg.shadow.z-50 (hx/alpine-appear {:x-ref "tooltip" :x-show "show" :data-key "show"})
-      [:div {:class "p-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200"}
-       [:div.flex.flex-col.gap-y-2 {:class "max-w-[24em]"}
-        (for [l links]
-          [:div.flex-initial
-           [:a {:href (:link l) :target "_blank"}
-            (com/pill {:color (or (:color l) :primary) :class "truncate block shrink grow-0"}
-                      (:content l))]])]]]]))
+     [:template {:x-ref "tooltip"}
+      [:div.divide-y.divide-gray-200
+       [:div {:class "p-2 overflow-y-auto text-sm text-gray-700 dark:text-gray-200"}
+        [:div.flex.flex-col.gap-y-2 {:class "max-w-[24em]"}
+         (for [l links]
+           [:div.flex-initial
+            [:a {:href (:link l) :target "_blank"}
+             (com/pill {:color (or (:color l) :primary) :class "truncate block shrink grow-0"}
+                       (:content l))]])]]]]]))