diff --git a/CHANGES.md b/CHANGES.md index 4f3266772d..aedaad7ed2 100644 --- a/CHANGES.md +++ b/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 diff --git a/frontend/src/app/main/ui/ds/tooltip/tooltip.cljs b/frontend/src/app/main/ui/ds/tooltip/tooltip.cljs index 92d3b7901e..59a96f8c4e 100644 --- a/frontend/src/app/main/ui/ds/tooltip/tooltip.cljs +++ b/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"}]]]])) diff --git a/frontend/src/app/main/ui/ds/tooltip/tooltip.scss b/frontend/src/app/main/ui/ds/tooltip/tooltip.scss index ae97c8b17b..fcce788d33 100644 --- a/frontend/src/app/main/ui/ds/tooltip/tooltip.scss +++ b/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);