Skip to content

Commit 77225e7

Browse files
committed
fix: 🐛 Correction du chevauchement de l'infobulle sur le côté droit
refactor: Rename variable to reflect actual behaviour fix: 🐛 Fix tooltip position computation
1 parent 4e7bd77 commit 77225e7

File tree

1 file changed

+11
-10
lines changed

1 file changed

+11
-10
lines changed

src/components/DsfrTooltip/DsfrTooltip.vue

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,25 +39,26 @@ async function computePosition () {
3939
const tooltipWidth = tooltip.value?.offsetWidth as number
4040
const tooltipTop = tooltip.value?.offsetTop as number
4141
const tooltipLeft = tooltip.value?.offsetLeft as number
42-
const isSourceAtTop = (sourceTop - tooltipHeight) < 0
43-
const isSourceAtBottom = !isSourceAtTop && (sourceTop + sourceHeight + tooltipHeight) >= document.documentElement.offsetHeight
44-
top.value = isSourceAtBottom
45-
const isSourceOnRightSide = (sourceLeft + sourceWidth) >= document.documentElement.offsetWidth
46-
const isSourceOnLeftSide = (sourceLeft + (sourceWidth / 2) - (tooltipWidth / 2)) <= 0
4742
48-
translateY.value = isSourceAtBottom
43+
const isTooltipAtBottom = sourceTop + sourceHeight + tooltipHeight >= document.documentElement.offsetHeight
44+
top.value = isTooltipAtBottom
45+
46+
const isTooltipOnRightSide = (sourceLeft + (sourceWidth / 2) + (tooltipWidth / 2)) >= document.documentElement.offsetWidth
47+
const isTooltipOnLeftSide = (sourceLeft + (sourceWidth / 2) - (tooltipWidth / 2)) < 0
48+
49+
translateY.value = isTooltipAtBottom
4950
? `${sourceTop - tooltipTop - tooltipHeight + 8}px`
5051
: `${sourceTop - tooltipTop + sourceHeight - 8}px`
5152
opacity.value = 1
52-
translateX.value = isSourceOnRightSide
53+
translateX.value = isTooltipOnRightSide
5354
? `${sourceLeft - tooltipLeft + sourceWidth - tooltipWidth - 4}px`
54-
: isSourceOnLeftSide
55+
: isTooltipOnLeftSide
5556
? `${sourceLeft - tooltipLeft + 4}px`
5657
: `${sourceLeft - tooltipLeft + (sourceWidth / 2) - (tooltipWidth / 2)}px`
5758
58-
arrowX.value = isSourceOnRightSide
59+
arrowX.value = isTooltipOnRightSide
5960
? `${(tooltipWidth / 2) - (sourceWidth / 2) + 4}px`
60-
: isSourceOnLeftSide
61+
: isTooltipOnLeftSide
6162
? `${-(tooltipWidth / 2) + (sourceWidth / 2) - 4}px`
6263
: '0px'
6364
}

0 commit comments

Comments
 (0)