From e0ebbed57f4a093bcf9d269791bad43864c58d34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lloren=C3=A7=20Muntaner?= Date: Wed, 20 Sep 2023 13:11:15 +0200 Subject: [PATCH] Fix: Tooltip is hidden if container has overflow hidden (#3339) # Motivation Part of the tooltip of the disabled "Disburse" button is hidden behind the island. That's because the tooltip uses the window to calculate whether there is enough space to the left or right. The problem happens when the container where the tooltip lives has `overflow: hidden`. The tooltip already received a containerSelector. Therefore, it can use the container to calculate the space to the left and right. # Changes * Use the container element instead of the width to calculate the space in the left or right of the tooltip. # Tests * Purely CSS changes. # Todos - [ ] Add entry to changelog (if necessary). --- CHANGELOG-Nns-Dapp.md | 1 + frontend/src/lib/components/ui/Tooltip.svelte | 10 ++++++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/CHANGELOG-Nns-Dapp.md b/CHANGELOG-Nns-Dapp.md index bc0e857bff8..de0c90d10c7 100644 --- a/CHANGELOG-Nns-Dapp.md +++ b/CHANGELOG-Nns-Dapp.md @@ -30,6 +30,7 @@ The NNS Dapp is released through proposals in the Network Nervous System. Theref * Fix sent transaction icon background color dark theme. * Improve text color of total value locked's label. * Make duration rendering consistent. +* Improve Tooltip location when container hides part of it. #### Security diff --git a/frontend/src/lib/components/ui/Tooltip.svelte b/frontend/src/lib/components/ui/Tooltip.svelte index cd969f9ecf1..ec0aa4392f9 100644 --- a/frontend/src/lib/components/ui/Tooltip.svelte +++ b/frontend/src/lib/components/ui/Tooltip.svelte @@ -28,11 +28,10 @@ return; } - const { innerWidth } = window; - const SCROLLBAR_FALLBACK_WIDTH = 20; const { clientWidth, offsetWidth } = main; + const { left: containerLeft } = main.getBoundingClientRect(); const scrollbarWidth = offsetWidth - clientWidth > 0 ? offsetWidth - clientWidth @@ -44,8 +43,11 @@ const { width: tooltipWidth } = tooltipComponent.getBoundingClientRect(); - const spaceLeft = targetCenter - (innerWidth - clientWidth) / 2; - const spaceRight = innerWidth - scrollbarWidth - targetCenter; + // Space at the left of the center of the target until the containerSelector. + const spaceLeft = targetCenter - containerLeft; + // Space at the right of the center of the target until the containerSelector. + const spaceRight = + containerLeft + clientWidth - scrollbarWidth - targetCenter; const overflowLeft = spaceLeft > 0 ? tooltipWidth / 2 - spaceLeft : 0; const overflowRight = spaceRight > 0 ? tooltipWidth / 2 - spaceRight : 0;