🐛 Fix tooltip position after click (#6830)

CHANGES.md

@@ -61,6 +61,7 @@ on-premises instances** that want to keep up to date.
 - Fix shortcut error pressing G+W from the View Mode [Taiga #11061](https://tree.taiga.io/project/penpot/issue/11061)
 - Fix entering long project name [Taiga #11417](https://tree.taiga.io/project/penpot/issue/11417)
 - Fix slow color picker [Taiga #11019](https://tree.taiga.io/project/penpot/issue/11019)
+- Fix tooltip position after click [Taiga #11405](https://tree.taiga.io/project/penpot/issue/11405)
 
 ## 2.7.2
 

frontend/src/app/main/ui/ds/tooltip/tooltip.cljs

@@ -36,8 +36,6 @@
 
 (defn- hide-popover
   [node]
-  (dom/unset-css-property! node "block-size")
-  (dom/unset-css-property! node "display")
   (.hidePopover ^js node))
 
 (defn- calculate-placement-bounding-rect
@@ -159,11 +157,9 @@
   (let [tooltip-brect (dom/get-bounding-rect tooltip)
         window-size   (dom/get-window-size)]
     (when-let [[placement placement-rect] (find-matching-placement placement tooltip-brect origin-brect window-size offset)]
-
       (let [height (if (or (= placement "right") (= placement "left"))
                      (- (:height placement-rect) arrow-height)
                      (:height placement-rect))]
-        (dom/set-css-property! tooltip "display" "grid")
         (dom/set-css-property! tooltip "block-size" (dm/str height "px"))
         (dom/set-css-property! tooltip "inset-block-start" (dm/str (:top placement-rect) "px"))
         (dom/set-css-property! tooltip "inset-inline-start" (dm/str (:left placement-rect) "px")))
@@ -212,8 +208,9 @@
 
                    update-position
                    (fn []
-                     (let [placement (update-tooltip-position tooltip placement origin-brect offset)]
-                       (reset! placement* placement)))]
+                     (let [new-placement (update-tooltip-position tooltip placement origin-brect offset)]
+                       (when (not= new-placement placement)
+                         (reset! placement* new-placement))))]
 
                (add-schedule schedule-ref delay update-position)))))
 
@@ -234,7 +231,7 @@
 
         tooltip-class
         (stl/css-case
-         :tooltip true
+         :tooltip-content-wrapper true
          :tooltip-top (identical? placement "top")
          :tooltip-bottom (identical? placement "bottom")
          :tooltip-left (identical? placement "left")
@@ -260,10 +257,11 @@
 
     [:> :div props
      children
-     [:div {:class [class tooltip-class]
+     [:div {:class [class (stl/css :tooltip)]
             :id id
             :popover "auto"
             :role "tooltip"}
-      [:div {:class (stl/css :tooltip-content)} content]
-      [:div {:class (stl/css :tooltip-arrow)
-             :id "tooltip-arrow"}]]]))
+      [:div {:class tooltip-class}
+       [:div {:class (stl/css :tooltip-content)} content]
+       [:div {:class (stl/css :tooltip-arrow)
+              :id "tooltip-arrow"}]]]]))

frontend/src/app/main/ui/ds/tooltip/tooltip.scss

@@ -19,6 +19,12 @@ $arrow-side: 12px;
   block-size: fit-content;
 }
 
+.tooltip-content-wrapper {
+  display: grid;
+  inline-size: fit-content;
+  block-size: fit-content;
+}
+
 .tooltip-arrow {
   background-color: var(--color-background-primary);
   border-radius: var(--sp-xs);