refactor(ui): remove react tippy (#11822)

* refactor: remove all react tippy stuff

deps/shui/src/logseq/shui/ui.cljs

@@ -53,6 +53,7 @@
 (def tooltip-portal (util/lsui-wrap "TooltipPortal"))
 (def tooltip-content (util/lsui-wrap "TooltipContent"))
 (def tooltip-provider (util/lsui-wrap "TooltipProvider"))
+(def tooltip-arrow (util/lsui-wrap "TooltipArrow"))
 
 (def card (util/lsui-wrap "Card"))
 (def card-header (util/lsui-wrap "CardHeader"))

src/main/frontend/components/container.cljs

@@ -782,19 +782,20 @@
 (rum/defc new-block-mode < rum/reactive
   []
   (when (state/sub [:document/mode?])
-    (ui/tippy {:html [:div.p-2
-                      [:p.mb-2 [:b "Document mode"]]
-                      [:ul
-                       [:li
-                        [:div.inline-block.mr-1 (ui/render-keyboard-shortcut (shortcut-dh/gen-shortcut-seq :editor/new-line))]
-                        [:p.inline-block "to create new block"]]
-                       [:li
-                        [:p.inline-block.mr-1 "Click `D` or type"]
-                        [:div.inline-block.mr-1 (ui/render-keyboard-shortcut (shortcut-dh/gen-shortcut-seq :ui/toggle-document-mode))]
-                        [:p.inline-block "to toggle document mode"]]]]}
-              [:a.block.px-1.text-sm.font-medium.bg-base-2.rounded-md.mx-2
-               {:on-click state/toggle-document-mode!}
-               "D"])))
+    (ui/tooltip
+      [:a.block.px-1.text-sm.font-medium.bg-base-2.rounded-md.mx-2
+       {:on-click state/toggle-document-mode!}
+       "D"]
+      [:div.p-2
+       [:p.mb-2 [:b "Document mode"]]
+       [:ul
+        [:li
+         [:div.inline-block.mr-1 (ui/render-keyboard-shortcut (shortcut-dh/gen-shortcut-seq :editor/new-line))]
+         [:p.inline-block "to create new block"]]
+        [:li
+         [:p.inline-block.mr-1 "Click `D` or type"]
+         [:div.inline-block.mr-1 (ui/render-keyboard-shortcut (shortcut-dh/gen-shortcut-seq :ui/toggle-document-mode))]
+         [:p.inline-block "to toggle document mode"]]]])))
 
 (def help-menu-items
   [{:title "Handbook" :icon "book-2" :on-click #(handbooks/toggle-handbooks)}

src/main/frontend/components/editor.cljs

@@ -81,13 +81,7 @@
             [:div.has-help
              {:title plugin-id}
              command-name
-             (when doc (ui/tippy
-                        {:html doc
-                         :interactive true
-                         :fixed-position? true
-                         :position "right"}
-
-                        [:small (svg/help-circle)]))]
+             (when doc (ui/tooltip [:small (svg/help-circle)] doc))]
 
             (string? doc)
             [:div {:title doc}

src/main/frontend/components/file_based/block.cljs

@@ -81,10 +81,9 @@
 (defn priority-cp
   [{:block/keys [pre-block? priority] :as block}]
   (when (and (not pre-block?) priority)
-    (ui/tippy
-     {:interactive true
-      :html (set-priority block priority)}
-     (priority-text priority))))
+    (ui/tooltip
+      (priority-text priority)
+      (set-priority block priority))))
 
 (defn clock-summary-cp
   [block body]
@@ -96,22 +95,20 @@
                  (not= summary "0m")
                  (not (string/blank? summary)))
         [:div {:style {:max-width 100}}
-         (ui/tippy {:html        (fn []
-                                   (when-let [logbook (drawer/get-logbook body)]
-                                     (let [clocks (->> (last logbook)
-                                                       (filter #(string/starts-with? % "CLOCK:"))
-                                                       (remove string/blank?))]
-                                       [:div.p-4
-                                        [:div.font-bold.mb-2 "LOGBOOK:"]
-                                        [:ul
-                                         (for [clock (take 10 (reverse clocks))]
-                                           [:li clock])]])))
-                    :interactive true
-                    :in-editor?  true
-                    :delay       [1000, 100]}
-                   [:div.text-sm.time-spent.ml-1 {:style {:padding-top 3}}
-                    [:a.fade-link
-                     summary]])]))))
+         (ui/tooltip
+           [:div.text-sm.time-spent.ml-1 {:style {:padding-top 3}}
+            [:a.fade-link
+             summary]]
+
+           (when-let [logbook (drawer/get-logbook body)]
+             (let [clocks (->> (last logbook)
+                            (filter #(string/starts-with? % "CLOCK:"))
+                            (remove string/blank?))]
+               [:div.p-4
+                [:div.font-bold.mb-2 "LOGBOOK:"]
+                [:ul
+                 (for [clock (take 10 (reverse clocks))]
+                   [:li clock])]])))]))))
 
 (rum/defc timestamp-editor
   [ast *show-datapicker?]

src/main/frontend/components/file_based/query.cljs

@@ -10,22 +10,17 @@
 
 (rum/defc query-refresh-button
   [query-time {:keys [on-pointer-down full-text-search?]}]
-  (ui/tippy
-   {:html  [:div
-            [:p
-             (if full-text-search?
-               [:span "Full-text search results will not be refreshed automatically."]
-               [:span (str "This query takes " (int query-time) "ms to finish, it's a bit slow so that auto refresh is disabled.")])]
-            [:p
-             "Click the refresh button instead if you want to see the latest result."]]
-    :interactive     true
-    :popperOptions   {:modifiers {:preventOverflow
-                                  {:enabled           true
-                                   :boundariesElement "viewport"}}}
-    :arrow true}
-   [:a.fade-link.flex
-    {:on-pointer-down on-pointer-down}
-    (ui/icon "refresh" {:style {:font-size 20}})]))
+  (ui/tooltip
+    [:a.fade-link.flex
+     {:on-pointer-down on-pointer-down}
+     (ui/icon "refresh" {:style {:font-size 20}})]
+    [:div
+     [:p
+      (if full-text-search?
+        [:span "Full-text search results will not be refreshed automatically."]
+        [:span (str "This query takes " (int query-time) "ms to finish, it's a bit slow so that auto refresh is disabled.")])]
+     [:p
+      "Click the refresh button instead if you want to see the latest result."]]))
 
 ;; Custom query header only used by file graphs
 (rum/defc custom-query-header

src/main/frontend/components/page.cljs

@@ -908,30 +908,35 @@
                                (reset! *excluded-pages? value)
                                (set-setting! :excluded-pages? value)))
                            true)]]
+
               (when (config/db-based-graph? (state/get-current-repo))
                 [:div.flex.flex-col.mb-2
                  [:p "Created before"]
                  (when created-at-filter
                    [:div (.toDateString (js/Date. (+ created-at-filter (get-in graph [:all-pages :created-at-min]))))])
-                 (ui/tippy {:html [:div.pr-3 (str (js/Date. (+ created-at-filter (get-in graph [:all-pages :created-at-min]))))]}
-                     ;; Slider keeps track off the range from min created-at to max created-at
-                     ;; because there were bugs with setting min and max directly
-                           (ui/slider created-at-filter
-                                      {:min 0
-                                       :max (- (get-in graph [:all-pages :created-at-max])
-                                               (get-in graph [:all-pages :created-at-min]))
-                                       :on-change #(do
-                                                     (reset! *created-at-filter (int %))
-                                                     (set-setting! :created-at-filter (int %)))}))])
+
+                 (ui/tooltip
+                   ;; Slider keeps track off the range from min created-at to max created-at
+                   ;; because there were bugs with setting min and max directly
+                   (ui/slider created-at-filter
+                     {:min 0
+                      :max (- (get-in graph [:all-pages :created-at-max])
+                             (get-in graph [:all-pages :created-at-min]))
+                      :on-change #(do
+                                    (reset! *created-at-filter (int %))
+                                    (set-setting! :created-at-filter (int %)))})
+                   [:div.px-1 (str (js/Date. (+ created-at-filter (get-in graph [:all-pages :created-at-min]))))])])
+
               (when (seq focus-nodes)
                 [:div.flex.flex-col.mb-2
                  [:p {:title "N hops from selected nodes"}
                   "N hops from selected nodes"]
-                 (ui/tippy {:html [:div.pr-3 n-hops]}
-                           (ui/slider (or n-hops 10)
-                                      {:min 1
-                                       :max 10
-                                       :on-change #(reset! *n-hops (int %))}))])
+                 (ui/tooltip
+                   (ui/slider (or n-hops 10)
+                     {:min 1
+                      :max 10
+                      :on-change #(reset! *n-hops (int %))})
+                   [:div n-hops])])
 
               [:a.opacity-70.opacity-100 {:on-click (fn []
                                                       (swap! *graph-reset? not)
@@ -977,39 +982,45 @@
               [:div.flex.flex-col.mb-2
                [:p {:title "Link Distance"}
                 "Link Distance"]
-               (ui/tippy {:html [:div.pr-3 link-dist]}
-                         (ui/slider (/ link-dist 10)
-                                    {:min 1   ;; 10
-                                     :max 18  ;; 180
-                                     :on-change #(let [value (int %)]
-                                                   (reset! *link-dist (* value 10))
-                                                   (set-forcesetting! :link-dist (* value 10)))}))]
+               (ui/tooltip
+                 (ui/slider (/ link-dist 10)
+                   {:min 1                                  ;; 10
+                    :max 18                                 ;; 180
+                    :on-change #(let [value (int %)]
+                                  (reset! *link-dist (* value 10))
+                                  (set-forcesetting! :link-dist (* value 10)))})
+                 [:div link-dist])]
+
               [:div.flex.flex-col.mb-2
                [:p {:title "Charge Strength"}
                 "Charge Strength"]
-               (ui/tippy {:html [:div.pr-3 charge-strength]}
-                         (ui/slider (/ charge-strength 100)
-                                    {:min -10  ;;-1000
-                                     :max 10   ;;1000
-                                     :on-change #(let [value (int %)]
-                                                   (reset! *charge-strength (* value 100))
-                                                   (set-forcesetting! :charge-strength (* value 100)))}))]
+               (ui/tooltip
+                 (ui/slider (/ charge-strength 100)
+                   {:min -10                                ;;-1000
+                    :max 10                                 ;;1000
+                    :on-change #(let [value (int %)]
+                                  (reset! *charge-strength (* value 100))
+                                  (set-forcesetting! :charge-strength (* value 100)))})
+                 [:div charge-strength])]
+
               [:div.flex.flex-col.mb-2
                [:p {:title "Charge Range"}
                 "Charge Range"]
-               (ui/tippy {:html [:div.pr-3 charge-range]}
-                         (ui/slider (/ charge-range 100)
-                                    {:min 5    ;;500
-                                     :max 40   ;;4000
-                                     :on-change #(let [value (int %)]
-                                                   (reset! *charge-range (* value 100))
-                                                   (set-forcesetting! :charge-range (* value 100)))}))]
-
-              [:a.opacity-70.opacity-100 {:on-click (fn []
-                                                      (swap! *graph-forcereset? not)
-                                                      (reset! *link-dist 70)
-                                                      (reset! *charge-strength -600)
-                                                      (reset! *charge-range 600))}
+               (ui/tooltip
+                 (ui/slider (/ charge-range 100)
+                   {:min 5                                  ;;500
+                    :max 40                                 ;;4000
+                    :on-change #(let [value (int %)]
+                                  (reset! *charge-range (* value 100))
+                                  (set-forcesetting! :charge-range (* value 100)))})
+                 [:div charge-range])]
+
+              [:a
+               {:on-click (fn []
+                            (swap! *graph-forcereset? not)
+                            (reset! *link-dist 70)
+                            (reset! *charge-strength -600)
+                            (reset! *charge-range 600))}
                "Reset Forces"]]]))
          {})
         (graph-filter-section

src/main/frontend/components/plugins.cljs

@@ -585,14 +585,14 @@
 
       (when (and develop-mode? (util/electron?) (not market?))
         [:div
-         (ui/tippy {:html  [:div (t :plugin/unpacked-tips)]
-                    :arrow true}
-                   (ui/button
-                    (t :plugin/load-unpacked)
-                    {:icon "upload"
-                     :intent "link"
-                     :class "load-unpacked"
-                     :on-click plugin-handler/load-unpacked-plugin}))
+         (ui/tooltip
+           (ui/button
+             (t :plugin/load-unpacked)
+             {:icon "upload"
+              :intent "link"
+              :class "load-unpacked"
+              :on-click plugin-handler/load-unpacked-plugin})
+           [:div (t :plugin/unpacked-tips)])
 
          (when (util/electron?)
            (unpacked-plugin-loader selected-unpacked-pkg))])]
@@ -1075,9 +1075,7 @@
 
            [:div.px-4
             (when-not (string/blank? notes)
-              (ui/tippy
-               {:html [:p notes]}
-               [:span.opacity-30.hover:opacity-80 (ui/icon "info-circle")]))]])]
+              (ui/tooltip [:span.opacity-30.hover:opacity-80 (ui/icon "info-circle")] [:p notes]))]])]
 
        ;; all done
        [:div.py-4 [:strong.text-4xl (str "\uD83C\uDF89 " (t :plugin/all-updated))]])

src/main/frontend/components/property.cljs

@@ -145,11 +145,8 @@
                                             (when (= "Enter" (.-key e))
                                               (util/stop-propagation e)))} label)))))
      (when show-type-change-hints?
-       (ui/tippy {:html        "Changing the property type clears some property configurations."
-                  :class       "tippy-hover ml-2"
-                  :interactive true
-                  :disabled    false}
-                 (svg/info)))]))
+       (ui/tooltip (svg/info)
+         [:span "Changing the property type clears some property configurations."]))]))
 
 (rum/defc property-select
   [exclude-properties select-opts]

src/main/frontend/components/property/config.cljs

@@ -601,19 +601,17 @@
        (dropdown-editor-menuitem {:icon :letter-t
                                   :title "Property type"
                                   :desc (if disabled?'
-                                          (ui/tippy {:html        [:div.w-96
-                                                                   "The type of this property is locked once you start using it. This is to make sure all your existing information stays correct if the property type is changed later. To unlock, all uses of a property must be deleted."]
-                                                     :class       "tippy-hover ml-2"
-                                                     :interactive true
-                                                     :disabled    false}
-                                                    (str property-type-label'))
+                                          (ui/tooltip
+                                            [:span (str property-type-label')]
+                                            [:div.w-96
+                                             "The type of this property is locked once you start using it. This is to make sure all your existing information stays correct if the property type is changed later. To unlock, all uses of a property must be deleted."])
                                           (str property-type-label'))
                                   :disabled? disabled?'
                                   :submenu-content (fn [ops]
                                                      (property-type-sub-pane property ops))}))
 
      (when (and (= property-type :node)
-                (not (contains? #{:logseq.property/parent} (:db/ident property))))
+             (not (contains? #{:logseq.property/parent} (:db/ident property))))
        (dropdown-editor-menuitem {:icon :hash
                                   :disabled? disabled?
                                   :title "Specify node tags"

src/main/frontend/components/settings.cljs

@@ -381,13 +381,7 @@
                           :let [active? (= color color-accent)
                                 none? (= color :none)]]
                       [:div.flex.items-center
-                       (ui/tippy
-                        {:html (case color
-                                 :none [:p {:style {:max-width "300px"}}
-                                        "Cancel accent color. This is currently in beta stage and mainly used for compatibility with custom themes."]
-                                 :logseq "Logseq classical color"
-                                 (str (name color) " color"))
-                         :delay [1000, 100]}
+                       (ui/tooltip
                         (shui/button
                          {:class "w-5 h-5 px-1 rounded-full flex justify-center items-center transition ease-in duration-100 hover:cursor-pointer hover:opacity-100"
                           :auto-focus (and _in-modal? active?)
@@ -402,7 +396,13 @@
                           {:class (if none? "h-0.5 w-full bg-red-700"
                                       "w-2 h-2 rounded-full transition ease-in duration-100")
                            :style {:background-color (if-not none? (str "var(--rx-" (name color) "-07)") "")
-                                   :opacity (if (or none? active?) 1 0)}}]))])]]
+                                   :opacity (if (or none? active?) 1 0)}}])
+
+                         (case color
+                           :none [:p {:style {:max-width "300px"}}
+                                  "Cancel accent color. This is currently in beta stage and mainly used for compatibility with custom themes."]
+                           :logseq "Logseq classical color"
+                           (str (name color) " color")))])]]
 
     [:div
      (row-with-button-action
@@ -431,11 +431,8 @@
     {:for "custom_date_format"}
     (t :settings-page/custom-date-format)
     (when-not (config/db-based-graph? (state/get-current-repo))
-      (ui/tippy {:html        (t :settings-page/custom-date-format-warning)
-                 :class       "tippy-hover ml-2"
-                 :interactive true
-                 :disabled    false}
-                (svg/info)))]
+      (ui/tooltip [:span.flex.px-2 (svg/info)]
+        [:span (t :settings-page/custom-date-format-warning)]))]
    [:div.mt-1.sm:mt-0.sm:col-span-2
     [:div.max-w-lg.rounded-md
      [:select.form-select.is-small
@@ -484,11 +481,8 @@
 (defn outdenting-row [t logical-outdenting?]
   (toggle "preferred_outdenting"
           [(t :settings-page/preferred-outdenting)
-           (ui/tippy {:html        (outdenting-hint)
-                      :class       "tippy-hover ml-2"
-                      :interactive true
-                      :disabled    false}
-                     (svg/info))]
+           (ui/tooltip [:span.flex.px-2 (svg/info)]
+             (outdenting-hint) {:content-props {:side "right"}})]
           logical-outdenting?
           config-handler/toggle-logical-outdenting!))
 
@@ -501,22 +495,16 @@
 (defn preferred-pasting-file [t preferred-pasting-file?]
   (toggle "preferred_pasting_file"
           [(t :settings-page/preferred-pasting-file)
-           (ui/tippy {:html        (t :settings-page/preferred-pasting-file-hint)
-                      :class       "tippy-hover ml-2"
-                      :interactive true
-                      :disabled    false}
-                     (svg/info))]
+           (ui/tooltip [:span.flex.px-2 (svg/info)]
+             [:span.block.w-64 (t :settings-page/preferred-pasting-file-hint)])]
           preferred-pasting-file?
           config-handler/toggle-preferred-pasting-file!))
 
 (defn auto-expand-row [t auto-expand-block-refs?]
   (toggle "auto_expand_block_refs"
           [(t :settings-page/auto-expand-block-refs)
-           (ui/tippy {:html        (auto-expand-hint)
-                      :class       "tippy-hover ml-2"
-                      :interactive true
-                      :disabled    false}
-                     (svg/info))]
+           (ui/tooltip [:span.flex.px-2 (svg/info)]
+             (auto-expand-hint))]
           auto-expand-block-refs?
           config-handler/toggle-auto-expand-block-refs!))
 
@@ -866,26 +854,23 @@
   (row-with-button-action
    {:left-label (str (t :settings-page/sync-diff-merge) " (Experimental!)") ;; Not included in i18n to avoid outdating translations
     :action (sync-diff-merge-enabled-switcher enabled?)
-    :desc (ui/tippy {:html        [:div
-                                   [:div (t :settings-page/sync-diff-merge-desc)]
-                                   [:div (t :settings-page/sync-diff-merge-warn)]]
-                     :class       "tippy-hover ml-2"
-                     :interactive true
-                     :disabled    false}
-                    (svg/info))}))
+    :desc (ui/tooltip [:span.inline-flex.px-1 (svg/info)]
+            [:div
+             [:div (t :settings-page/sync-diff-merge-desc)]
+             [:div (t :settings-page/sync-diff-merge-warn)]])}))
 
 (rum/defc rtc-enabled-switcher
   [enabled?]
   (ui/toggle enabled?
-             (fn []
-               (let [value (not enabled?)]
-                 (state/set-rtc-enabled! value)))
-             true))
+    (fn []
+      (let [value (not enabled?)]
+        (state/set-rtc-enabled! value)))
+    true))
 
 (defn rtc-switcher-row [enabled?]
   (row-with-button-action
-   {:left-label "RTC"
-    :action (rtc-enabled-switcher enabled?)}))
+    {:left-label "RTC"
+     :action (rtc-enabled-switcher enabled?)}))
 
 (rum/defc whiteboards-enabled-switcher
   [enabled?]

src/main/frontend/extensions/srs.cljs

@@ -488,16 +488,17 @@
                                    :on-click   #(score-and-next-card 5 card card-index finished? phase review-records cb)})])
 
             (when preview?
-              (ui/tippy {:html [:div.text-sm
-                                (t :flashcards/modal-btn-reset-tip)]
-                         :class "tippy-hover"
-                         :interactive true}
-                        (ui/button [:span (t :flashcards/modal-btn-reset)]
-                                   :id "card-reset"
-                                   :class (util/hiccup->class "opacity-60.hover:opacity-100.card-reset")
-                                   :on-click (fn [e]
-                                               (util/stop e)
-                                               (operation-reset! card)))))]
+              (ui/tooltip
+                (ui/button [:span (t :flashcards/modal-btn-reset)]
+                  :id "card-reset"
+                  :class (util/hiccup->class "opacity-60.hover:opacity-100.card-reset")
+                  :on-click (fn [e]
+                              (util/stop e)
+                              (operation-reset! card)))
+
+                [:div.text-sm
+                 (t :flashcards/modal-btn-reset-tip)]
+                {:trigger-props {:as-child false}}))]
            [:div.my-3 (ui/button "Review cards" :small? true)])]))))
 
 (rum/defc view-modal <
@@ -629,27 +630,20 @@
 
            ;; FIXME: CSS issue
            (if @*preview-mode?
-             (ui/tippy {:html [:div.text-sm (t :flashcards/modal-current-total)]
-                        :interactive true}
-                       [:div.opacity-60.text-sm.mr-2
-                        @*card-index
-                        [:span "/"]
-                        total])
-             (ui/tippy {:html [:div.text-sm (t :flashcards/modal-overdue-total)]
-                        ;; :class "tippy-hover"
-                        :interactive true}
-                       [:div.opacity-60.text-sm.mr-2
-                        (max 0 (- filtered-total @*card-index))
-                        [:span "/"]
-                        total]))
-
-           (ui/tippy
-            {:html [:div.text-sm (t :flashcards/modal-toggle-preview-mode)]
-             :delay [1000, 100]
-             :class "tippy-hover"
-             :interactive true
-             :disabled false}
-
+             (ui/tooltip
+               [:div.opacity-60.text-sm.mr-2
+                @*card-index
+                [:span "/"]
+                total]
+               [:div.text-sm (t :flashcards/modal-current-total)])
+             (ui/tooltip
+               [:div.opacity-60.text-sm.mr-2
+                (max 0 (- filtered-total @*card-index))
+                [:span "/"]
+                total]
+               [:div.text-sm (t :flashcards/modal-overdue-total)]))
+
+           (ui/tooltip
             (ui/button
              (merge
               {:icon "letter-a"
@@ -661,13 +655,11 @@
                :button-props {:id "preview-all-cards"}
                :small? true}
               (when @*preview-mode?
-                {:icon-props {:style {:color "var(--ls-button-background)"}}}))))
+                {:icon-props {:style {:color "var(--ls-button-background)"}}})))
+             [:div.text-sm (t :flashcards/modal-toggle-preview-mode)]
+             {:trigger-props {:as-child false}})
 
-           (ui/tippy
-            {:html [:div.text-sm (t :flashcards/modal-toggle-random-mode)]
-             :delay [1000, 100]
-             :class "tippy-hover"
-             :interactive true}
+           (ui/tooltip
             (ui/button
              (merge
               {:icon "arrows-shuffle"
@@ -677,7 +669,9 @@
                            (swap! *random-mode? not))
                :small? true}
               (when @*random-mode?
-                {:icon-props {:style {:color "var(--ls-button-background)"}}}))))]]
+                {:icon-props {:style {:color "var(--ls-button-background)"}}})))
+             [:div.text-sm (t :flashcards/modal-toggle-random-mode)]
+             {:trigger-props {:as-child false}})]]
          [:div.px-1
           (when (and (not modal?) (not @*preview-mode?))
             {:on-click (fn []

src/main/frontend/tippy-tooltip.css

@@ -1,79 +0,0 @@
-.tippy-popper {
-  max-width: 800px;
-}
-
-.tippy-popper[x-placement^=top] [x-arrow],
-.tippy-popper[x-placement^=top] [x-arrow].arrow-small,
-.tippy-popper[x-placement^=top] [x-arrow].arrow-big {
-  border-top-color: var(--ls-tertiary-background-color);
-}
-
-.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle],
-.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle],
-.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle],
-.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle],
-.tippy-popper .tippy-tooltip.transparent-theme {
-  background-color: var(--ls-secondary-background-color);
-}
-
-.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow],
-.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small,
-.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
-  border-top-color: var(--ls-secondary-background-color);
-}
-
-.tippy-popper[x-placement^=bottom] [x-arrow],
-.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small,
-.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big {
-  border-bottom-color: var(--ls-tertiary-background-color);
-}
-
-.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow],
-.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small,
-.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
-  border-bottom-color: var(--ls-secondary-background-color);
-}
-
-.tippy-popper[x-placement^=left] [x-arrow],
-.tippy-popper[x-placement^=left] [x-arrow].arrow-small,
-.tippy-popper[x-placement^=left] [x-arrow].arrow-big {
-  border-left-color: var(--ls-tertiary-background-color);
-}
-
-.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow],
-.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small,
-.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
-  border-left-color: var(--ls-secondary-background-color);
-}
-
-.tippy-popper[x-placement^=right] [x-arrow],
-.tippy-popper[x-placement^=right] [x-arrow].arrow-small,
-.tippy-popper[x-placement^=right] [x-arrow].arrow-big {
-  border-right-color: var(--ls-tertiary-background-color);
-}
-
-.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow],
-.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small,
-.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
-  border-right-color: var(--ls-tertiary-background-color);
-}
-
-.tippy-tooltip {
-  @apply shadow border border-gray-07 dark:border-gray-05 px-2 py-1;
-
-  will-change: auto;
-  color: var(--ls-primary-text-color, hsl(var(--foreground)));
-  background-color: var(--lx-gray-03, var(--ls-tertiary-background-color, var(--rx-gray-03)));
-}
-
-.tippy-tooltip [x-circle] {
-  will-change: auto;
-}
-
-.tippy-popper .tippy-tooltip.customized-theme * {
-  text-align: left;
-}
-
-.tippy-popper .tippy-tooltip.monospace-theme {
-  font-family: 'Fira Code', Monaco, Menlo, Consolas, 'COURIER NEW', monospace;
-}

src/main/frontend/ui.cljs

@@ -5,7 +5,6 @@
             ["emoji-mart" :as emoji-mart]
             ["react-intersection-observer" :as react-intersection-observer]
             ["react-textarea-autosize" :as TextareaAutosize]
-            ["react-tippy" :as react-tippy]
             ["react-transition-group" :refer [CSSTransition TransitionGroup]]
             ["react-virtuoso" :refer [Virtuoso VirtuosoGrid]]
             [cljs-bean.core :as bean]
@@ -40,6 +39,7 @@
             [rum.core :as rum]))
 
 (declare icon)
+(declare tooltip)
 
 (defonce transition-group (r/adapt-class TransitionGroup))
 (defonce css-transition (r/adapt-class CSSTransition))
@@ -47,7 +47,6 @@
 (defonce virtualized-list (r/adapt-class Virtuoso))
 (defonce virtualized-grid (r/adapt-class VirtuosoGrid))
 
-(def Tippy (r/adapt-class (gobj/get react-tippy "Tooltip")))
 (def ReactTweetEmbed (r/adapt-class react-tweet-embed))
 (def useInView (gobj/get react-intersection-observer "useInView"))
 (defonce _emoji-init-data ((gobj/get emoji-mart "init") #js {:data emoji-data}))
@@ -791,45 +790,6 @@
           :checked selected}]
         label])]))
 
-(rum/defcs tippy < rum/static
-  (rum/local false ::mounted?)
-  [state {:keys [fixed-position? open? html] :as opts} child]
-  (let [*mounted? (::mounted? state)
-        manual (not= open? nil)
-        open? (if manual open? @*mounted?)
-        disabled? (not (state/enable-tooltip?))]
-    (Tippy (->
-            (merge {:arrow true
-                    :sticky true
-                    :delay 600
-                    :theme "customized"
-                    :disabled disabled?
-                    :unmountHTMLWhenHide true
-                    :open (if disabled? false open?)
-                    :trigger (if manual "manual" "mouseenter focus")
-                    ;; See https://github.com/tvkhoa/react-tippy/issues/13
-                    :popperOptions {:modifiers {:flip {:enabled (not fixed-position?)}
-                                                :hide {:enabled false}
-                                                :preventOverflow {:enabled false}}}
-                    :onShow #(when-not (or (state/editing?)
-                                           @(:ui/scrolling? @state/state))
-                               (reset! *mounted? true))
-                    :onHide #(reset! *mounted? false)}
-                   opts)
-            (assoc :html (or
-                          (when open?
-                            (try
-                              (when html
-                                (if (fn? html)
-                                  (html)
-                                  [:div.px-2.py-1
-                                   html]))
-                              (catch :default e
-                                (log/error :exception e)
-                                [:div])))
-                          [:div {:key "tippy"} ""])))
-           (rum/fragment {:key "tippy-children"} child))))
-
 (rum/defcs slider < rum/reactive
   {:init (fn [state]
            (assoc state ::value (atom (first (:rum/args state)))))}
@@ -911,18 +871,13 @@
 
 (rum/defc with-shortcut < rum/reactive
   < {:key-fn (fn [key pos] (str "shortcut-" key pos))}
-  [shortcut-key position content]
+  [shortcut-key _position content]
   (let [shortcut-tooltip? (state/sub :ui/shortcut-tooltip?)
         enabled-tooltip? (state/enable-tooltip?)]
     (if (and enabled-tooltip? shortcut-tooltip?)
-      (tippy
-       {:html [:div.text-sm.font-medium (keyboard-shortcut-from-config shortcut-key)]
-        :interactive true
-        :position    position
-        :theme       "monospace"
-        :delay       [1000, 100]
-        :arrow       true}
-       content)
+      (tooltip content
+        [:div.text-sm.font-medium (keyboard-shortcut-from-config shortcut-key)]
+        {:trigger-props {:as-child true}})
       content)))
 
 (rum/defc progress-bar
@@ -1020,11 +975,14 @@
       :small? true)]]))
 
 (rum/defc tooltip
-  [trigger tooltip-content & {:keys [trigger-props]}]
+  [trigger tooltip-content & {:keys [portal? root-props trigger-props content-props]}]
   (shui/tooltip-provider
-   (shui/tooltip
-    (shui/tooltip-trigger trigger-props trigger)
-    (shui/tooltip-content tooltip-content))))
+    (shui/tooltip root-props
+      (shui/tooltip-trigger (merge {:as-child true} trigger-props) trigger)
+      (if (not (false? portal?))
+        (shui/tooltip-portal
+          (shui/tooltip-content content-props tooltip-content))
+        (shui/tooltip-content content-props tooltip-content)))))
 
 (rum/defc DelDateButton
   [on-delete]