3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-24 16:16:13 +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)
offset (d/nilv offset 2)
arrow-height 12
half-arrow-height (/ arrow-height 2)
overlay-offset 32]
(case placement
"bottom"
{:top (+ trigger-bottom offset)
: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)
:width tooltip-width
:height tooltip-height}
"left"
{:top (- (+ trigger-top (/ trigger-height 2) 8) (/ tooltip-height 2))
:left (- trigger-left tooltip-width 12)
:right (+ (- trigger-left tooltip-width 12) tooltip-width)
:bottom (+ (- (+ trigger-top (/ trigger-height 2) 12) (/ tooltip-height 2)) tooltip-height)
{:top (- (+ trigger-top (/ trigger-height 2) half-arrow-height) (/ tooltip-height 2))
:left (- trigger-left tooltip-width)
:right (+ (- trigger-left tooltip-width) tooltip-width)
:bottom (+ (- (+ trigger-top (/ trigger-height 2) half-arrow-height) (/ tooltip-height 2)) tooltip-height)
:width tooltip-width
:height tooltip-height}
"right"
{:top (- (+ trigger-top (/ trigger-height 2) 4) (/ tooltip-height 2))
:left (+ trigger-right offset 4)
:right (+ trigger-right offset tooltip-width 4)
:bottom (+ (- (+ trigger-top (/ trigger-height 2) 4) (/ tooltip-height 2)) tooltip-height)
{:top (- (+ trigger-top (/ trigger-height 2) half-arrow-height) (/ tooltip-height 2))
:left (+ trigger-right offset)
:right (+ trigger-right offset tooltip-width)
:bottom (+ (- (+ trigger-top (/ trigger-height 2) half-arrow-height) (/ tooltip-height 2)) tooltip-height)
:width tooltip-width
:height tooltip-height}
@ -65,7 +67,7 @@
"bottom-left"
{:top (+ trigger-bottom 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)
:width tooltip-width
:height tooltip-height}
@ -74,22 +76,22 @@
{:top (- trigger-top offset tooltip-height)
:left (- trigger-right overlay-offset)
:right (+ (- trigger-right overlay-offset) tooltip-width)
:bottom (+ (- trigger-top offset tooltip-height) tooltip-height)
:bottom (- trigger-top offset)
:width tooltip-width
:height tooltip-height}
"top-left"
{:top (- trigger-top offset tooltip-height)
:left (+ (- trigger-left tooltip-width) overlay-offset)
:right (+ (- trigger-left tooltip-width) overlay-offset tooltip-width)
:bottom (+ (- trigger-top offset tooltip-height) tooltip-height)
:right (+ trigger-left overlay-offset)
:bottom (- trigger-top offset)
:width tooltip-width
:height tooltip-height}
{:top (- trigger-top offset tooltip-height)
:left (- (+ trigger-left (/ trigger-width 2)) (/ tooltip-width 2))
: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
:height tooltip-height})))
@ -134,8 +136,8 @@
(if (dom/is-bounding-rect-outside? tooltip-rect)
(recur remaining-placements)
(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 "left" (dm/str (:left tooltip-rect) "px")))))))))
(dom/set-css-property! tooltip "inset-block-start" (dm/str (:top tooltip-rect) "px"))
(dom/set-css-property! tooltip "inset-inline-start" (dm/str (:left tooltip-rect) "px")))))))))
on-show
(mf/use-fn

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

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