3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-25 04:36:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Tooltip positioning tunning (#6418)

Browse source
This commit is contained in:
Eva Marco 2025-05-08 11:09:58 +02:00 • committed by GitHub
parent bd514c0594
commit b71b9edee7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 53 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/app/main/ui/ds/tooltip/tooltip.cljs
View file

@ -27,30 +27,32 @@
tooltip-height :height} (dom/get-bounding-rect tooltip) tooltip-height :height} (dom/get-bounding-rect tooltip)
offset (d/nilv offset 2) offset (d/nilv offset 2)
arrow-height 12
half-arrow-height (/ arrow-height 2)
overlay-offset 32] overlay-offset 32]
(case placement (case placement
"bottom" "bottom"
{:top (+ trigger-bottom offset) {:top (+ trigger-bottom offset)
:left (- (+ trigger-left (/ trigger-width 2)) (/ tooltip-width 2)) :left (- (+ trigger-left (/ trigger-width 2)) (/ tooltip-width 2))
:right (+ (- (+ trigger-left (/ trigger-width 2)) (/ tooltip-width 2)) tooltip-width) :right (+ trigger-left (/ trigger-width 2) (/ tooltip-width 2))
:bottom (+ (- trigger-bottom offset) tooltip-height) :bottom (+ (- trigger-bottom offset) tooltip-height)
:width tooltip-width :width tooltip-width
:height tooltip-height} :height tooltip-height}
"left" "left"
{:top (- (+ trigger-top (/ trigger-height 2) 8) (/ tooltip-height 2)) {:top (- (+ trigger-top (/ trigger-height 2) half-arrow-height) (/ tooltip-height 2))
:left (- trigger-left tooltip-width 12) :left (- trigger-left tooltip-width)
:right (+ (- trigger-left tooltip-width 12) tooltip-width) :right (+ (- trigger-left tooltip-width) tooltip-width)
:bottom (+ (- (+ trigger-top (/ trigger-height 2) 12) (/ tooltip-height 2)) tooltip-height) :bottom (+ (- (+ trigger-top (/ trigger-height 2) half-arrow-height) (/ tooltip-height 2)) tooltip-height)
:width tooltip-width :width tooltip-width
:height tooltip-height} :height tooltip-height}
"right" "right"
{:top (- (+ trigger-top (/ trigger-height 2) 4) (/ tooltip-height 2)) {:top (- (+ trigger-top (/ trigger-height 2) half-arrow-height) (/ tooltip-height 2))
:left (+ trigger-right offset 4) :left (+ trigger-right offset)
:right (+ trigger-right offset tooltip-width 4) :right (+ trigger-right offset tooltip-width)
:bottom (+ (- (+ trigger-top (/ trigger-height 2) 4) (/ tooltip-height 2)) tooltip-height) :bottom (+ (- (+ trigger-top (/ trigger-height 2) half-arrow-height) (/ tooltip-height 2)) tooltip-height)
:width tooltip-width :width tooltip-width
:height tooltip-height} :height tooltip-height}
@ -65,7 +67,7 @@
"bottom-left" "bottom-left"
{:top (+ trigger-bottom offset) {:top (+ trigger-bottom offset)
:left (+ (- trigger-left tooltip-width) overlay-offset) :left (+ (- trigger-left tooltip-width) overlay-offset)
:right (+ (- trigger-left tooltip-width) overlay-offset tooltip-width) :right (+ trigger-left overlay-offset)
:bottom (+ (- trigger-bottom offset) tooltip-height) :bottom (+ (- trigger-bottom offset) tooltip-height)
:width tooltip-width :width tooltip-width
:height tooltip-height} :height tooltip-height}
@ -74,22 +76,22 @@
{:top (- trigger-top offset tooltip-height) {:top (- trigger-top offset tooltip-height)
:left (- trigger-right overlay-offset) :left (- trigger-right overlay-offset)
:right (+ (- trigger-right overlay-offset) tooltip-width) :right (+ (- trigger-right overlay-offset) tooltip-width)
:bottom (+ (- trigger-top offset tooltip-height) tooltip-height) :bottom (- trigger-top offset)
:width tooltip-width :width tooltip-width
:height tooltip-height} :height tooltip-height}
"top-left" "top-left"
{:top (- trigger-top offset tooltip-height) {:top (- trigger-top offset tooltip-height)
:left (+ (- trigger-left tooltip-width) overlay-offset) :left (+ (- trigger-left tooltip-width) overlay-offset)
:right (+ (- trigger-left tooltip-width) overlay-offset tooltip-width) :right (+ trigger-left overlay-offset)
:bottom (+ (- trigger-top offset tooltip-height) tooltip-height) :bottom (- trigger-top offset)
:width tooltip-width :width tooltip-width
:height tooltip-height} :height tooltip-height}
{:top (- trigger-top offset tooltip-height) {:top (- trigger-top offset tooltip-height)
:left (- (+ trigger-left (/ trigger-width 2)) (/ tooltip-width 2)) :left (- (+ trigger-left (/ trigger-width 2)) (/ tooltip-width 2))
:right (+ (- (+ trigger-left (/ trigger-width 2)) (/ tooltip-width 2)) tooltip-width) :right (+ (- (+ trigger-left (/ trigger-width 2)) (/ tooltip-width 2)) tooltip-width)
:bottom (+ (- trigger-top offset tooltip-height) tooltip-height) :bottom (- trigger-top offset)
:width tooltip-width :width tooltip-width
:height tooltip-height}))) :height tooltip-height})))
@ -134,8 +136,8 @@
(if (dom/is-bounding-rect-outside? tooltip-rect) (if (dom/is-bounding-rect-outside? tooltip-rect)
(recur remaining-placements) (recur remaining-placements)
(do (dom/set-css-property! tooltip "display" "grid") (do (dom/set-css-property! tooltip "display" "grid")
(dom/set-css-property! tooltip "top" (dm/str (:top tooltip-rect) "px")) (dom/set-css-property! tooltip "inset-block-start" (dm/str (:top tooltip-rect) "px"))
(dom/set-css-property! tooltip "left" (dm/str (:left tooltip-rect) "px"))))))))) (dom/set-css-property! tooltip "inset-inline-start" (dm/str (:left tooltip-rect) "px")))))))))
on-show on-show
(mf/use-fn (mf/use-fn

68
frontend/src/app/main/ui/ds/tooltip/tooltip.scss
View file

@ -6,27 +6,23 @@
@use "../_sizes.scss" as *; @use "../_sizes.scss" as *;
@use "../_borders.scss" as *; @use "../_borders.scss" as *;
@use "../typography.scss" as *; @use "../typography.scss" as t;
// This variable refers to the legs of $arrow-side: 12px;
// an equilateral triangle with base 16px
// and height 8px to design of the arrow.
$arrow-size: 11px;
.tooltip { .tooltip {
position: absolute; position: absolute;
max-width: $sz-352; max-inline-size: $sz-352;
background-color: transparent; background-color: transparent;
overflow: hidden; overflow: hidden;
width: fit-content; inline-size: fit-content;
} }
.tooltip-arrow { .tooltip-arrow {
background-color: var(--color-background-primary); background-color: var(--color-background-primary);
border-radius: var(--sp-xs); border-radius: var(--sp-xs);
width: $arrow-size; inline-size: $arrow-side;
height: $arrow-size; block-size: $arrow-side;
grid-area: arrow; grid-area: arrow;
} }
@ -39,9 +35,10 @@ $arrow-size: 11px;
.tooltip-top .tooltip-arrow { .tooltip-top .tooltip-arrow {
justify-self: center; justify-self: center;
border-radius: 0 0 var(--sp-xs) 0; border-radius: 0 0 var(--sp-xs) 0;
transform: rotate(45deg) translateX(calc(-1 * var(--sp-s))); transform-origin: 0 0;
border-bottom: $b-1 solid var(--color-accent-primary-muted); transform: rotate(45deg) translate(-2px, -10px);
border-right: $b-1 solid var(--color-accent-primary-muted); border-block-end: $b-1 solid var(--color-accent-primary-muted);
border-inline-end: $b-1 solid var(--color-accent-primary-muted);
} }
.tooltip-bottom { .tooltip-bottom {
@ -52,9 +49,10 @@ $arrow-size: 11px;
.tooltip-bottom .tooltip-arrow { .tooltip-bottom .tooltip-arrow {
justify-self: center; justify-self: center;
border-radius: var(--sp-xs) 0; border-radius: var(--sp-xs) 0;
transform: rotate(45deg) translateX(var(--sp-s)); transform-origin: 0 0;
border-top: $b-1 solid var(--color-accent-primary-muted); transform: rotate(45deg) translate(7px, -2px);
border-left: $b-1 solid var(--color-accent-primary-muted); border-block-start: $b-1 solid var(--color-accent-primary-muted);
border-inline-start: $b-1 solid var(--color-accent-primary-muted);
} }
.tooltip-left { .tooltip-left {
@ -64,21 +62,23 @@ $arrow-size: 11px;
.tooltip-left .tooltip-arrow { .tooltip-left .tooltip-arrow {
align-self: center; align-self: center;
border-radius: 0 var(--sp-xs); border-radius: 0 var(--sp-xs);
transform: rotate(45deg) translateX(calc(-1 * var(--sp-xs))) translateY(var(--sp-xs)); transform-origin: 0 0;
border-top: $b-1 solid var(--color-accent-primary-muted); transform: rotate(45deg) translate(-2px, -1px);
border-right: $b-1 solid var(--color-accent-primary-muted); border-block-start: $b-1 solid var(--color-accent-primary-muted);
border-inline-end: $b-1 solid var(--color-accent-primary-muted);
} }
.tooltip-right { .tooltip-right {
grid-template-areas: " arrow content"; grid-template-areas: "arrow content";
} }
.tooltip-right .tooltip-arrow { .tooltip-right .tooltip-arrow {
align-self: center; align-self: center;
border-radius: 0 var(--sp-xs); border-radius: 0 var(--sp-xs);
transform: rotate(45deg) translateX(var(--sp-xs)) translateY(calc(-1 * var(--sp-xs))); transform-origin: 0 0;
border-bottom: $b-1 solid var(--color-accent-primary-muted); transform: rotate(45deg) translate(7px, -10px);
border-left: $b-1 solid var(--color-accent-primary-muted); border-block-end: $b-1 solid var(--color-accent-primary-muted);
border-inline-start: $b-1 solid var(--color-accent-primary-muted);
} }
.tooltip-top-right { .tooltip-top-right {
@ -91,8 +91,8 @@ $arrow-size: 11px;
margin: 0 var(--sp-l); margin: 0 var(--sp-l);
border-radius: var(--sp-xs) 0; border-radius: var(--sp-xs) 0;
transform: rotate(45deg) translateX(calc(-1 * var(--sp-s))); transform: rotate(45deg) translateX(calc(-1 * var(--sp-s)));
border-bottom: $b-1 solid var(--color-accent-primary-muted); border-block-end: $b-1 solid var(--color-accent-primary-muted);
border-right: $b-1 solid var(--color-accent-primary-muted); border-inline-end: $b-1 solid var(--color-accent-primary-muted);
} }
.tooltip-bottom-right { .tooltip-bottom-right {
@ -105,8 +105,8 @@ $arrow-size: 11px;
margin: 0px var(--sp-s); margin: 0px var(--sp-s);
transform: rotate(45deg) translateX(var(--sp-s)); transform: rotate(45deg) translateX(var(--sp-s));
border-radius: var(--sp-xs) 0; border-radius: var(--sp-xs) 0;
border-top: $b-1 solid var(--color-accent-primary-muted); border-block-start: $b-1 solid var(--color-accent-primary-muted);
border-left: $b-1 solid var(--color-accent-primary-muted); border-inline-start: $b-1 solid var(--color-accent-primary-muted);
} }
.tooltip-bottom-left { .tooltip-bottom-left {
@ -119,8 +119,8 @@ $arrow-size: 11px;
margin: 0 var(--sp-s); margin: 0 var(--sp-s);
transform: rotate(45deg) translateY(var(--sp-s)); transform: rotate(45deg) translateY(var(--sp-s));
border-radius: var(--sp-xs) 0; border-radius: var(--sp-xs) 0;
border-top: $b-1 solid var(--color-accent-primary-muted); border-block-start: $b-1 solid var(--color-accent-primary-muted);
border-left: $b-1 solid var(--color-accent-primary-muted); border-inline-start: $b-1 solid var(--color-accent-primary-muted);
} }
.tooltip-top-left { .tooltip-top-left {
@ -133,11 +133,12 @@ $arrow-size: 11px;
justify-self: end; justify-self: end;
border-radius: var(--sp-xs) 0; border-radius: var(--sp-xs) 0;
transform: rotate(45deg) translateX(calc(-1 * var(--sp-s))); transform: rotate(45deg) translateX(calc(-1 * var(--sp-s)));
border-bottom: $b-1 solid var(--color-accent-primary-muted); border-block-end: $b-1 solid var(--color-accent-primary-muted);
border-right: $b-1 solid var(--color-accent-primary-muted); border-inline-end: $b-1 solid var(--color-accent-primary-muted);
} }
.tooltip-content { .tooltip-content {
@include t.use-typography("body-small");
background-color: var(--color-background-primary); background-color: var(--color-background-primary);
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
border-radius: var(--sp-xs); border-radius: var(--sp-xs);
@ -147,6 +148,7 @@ $arrow-size: 11px;
} }
.tooltip-trigger { .tooltip-trigger {
width: fit-content; block-size: fit-content;
height: fit-content; inline-size: fit-content;
line-height: 0;
} }