🐛 Fix tooltip position after click (#6830)

This commit is contained in:
Eva Marco 2025-07-02 09:56:14 +02:00 committed by GitHub
parent 5c4fd97541
commit a3aabf3b7d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 16 additions and 11 deletions

View file

@ -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

View file

@ -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"}]]]]))

View file

@ -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);