Fix tooltip overscrolling issue

PostHog · Oct 11, 2023 · 0207866 · 0207866
1 parent 7a14421
commit 0207866
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 6 deletions.
diff --git a/frontend/src/scenes/funnels/useFunnelTooltip.tsx b/frontend/src/scenes/funnels/useFunnelTooltip.tsx
@@ -111,6 +111,9 @@ export function useFunnelTooltip(showPersonsModal: boolean): React.RefObject<HTM
         const svgRect = vizRef.current?.getBoundingClientRect()
         const tooltipEl = ensureTooltipElement()
         tooltipEl.style.opacity = isTooltipShown ? '1' : '0'
+        if (isTooltipShown) {
+            tooltipEl.style.display = 'initial'
+        }
         const tooltipRect = tooltipEl.getBoundingClientRect()
         if (tooltipOrigin) {
             ReactDOM.render(

diff --git a/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx b/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx
@@ -41,6 +41,9 @@ function useBoldNumberTooltip({
         const divRect = divRef.current?.getBoundingClientRect()
         const tooltipEl = ensureTooltipElement()
         tooltipEl.style.opacity = isTooltipShown ? '1' : '0'
+        if (isTooltipShown) {
+            tooltipEl.style.display = 'initial'
+        }
 
         const seriesResult = insightData?.result?.[0]
 
@@ -66,10 +69,10 @@ function useBoldNumberTooltip({
             () => {
                 const tooltipRect = tooltipEl.getBoundingClientRect()
                 if (divRect) {
-                    tooltipEl.style.top = `${
-                        window.scrollY + divRect.top - tooltipRect.height - BOLD_NUMBER_TOOLTIP_OFFSET_PX
-                    }px`
-                    tooltipEl.style.left = `${divRect.left + divRect.width / 2 - tooltipRect.width / 2}px`
+                    const desiredTop = window.scrollY + divRect.top - tooltipRect.height - BOLD_NUMBER_TOOLTIP_OFFSET_PX
+                    const desiredLeft = divRect.left + divRect.width / 2 - tooltipRect.width / 2
+                    tooltipEl.style.top = `${Math.min(desiredTop, window.innerHeight)}px`
+                    tooltipEl.style.left = `${Math.min(desiredLeft, window.innerWidth)}px`
                 }
             }
         )

diff --git a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
@@ -44,6 +44,7 @@ export function ensureTooltipElement(): HTMLElement {
         tooltipEl = document.createElement('div')
         tooltipEl.id = 'InsightTooltipWrapper'
         tooltipEl.classList.add('InsightTooltipWrapper')
+        tooltipEl.style.display = 'none'
         document.body.appendChild(tooltipEl)
     }
     return tooltipEl
@@ -432,6 +433,7 @@ export function LineGraph_({
                         tooltipEl.classList.remove('above', 'below', 'no-transform')
                         tooltipEl.classList.add(tooltip.yAlign || 'no-transform')
                         tooltipEl.style.opacity = '1'
+                        tooltipEl.style.display = 'initial'
 
                         if (tooltip.body) {
                             const referenceDataPoint = tooltip.dataPoints[0] // Use this point as reference to get the date
@@ -520,8 +522,8 @@ export function LineGraph_({
                                 ? chartClientLeft + tooltip.caretX - tooltipEl.clientWidth - 8 // If tooltip is too large (or close to the edge), show it to the left of the data point instead
                                 : defaultOffsetLeft
 
-                        tooltipEl.style.top = tooltipClientTop + 'px'
-                        tooltipEl.style.left = tooltipClientLeft + 'px'
+                        tooltipEl.style.top = Math.min(tooltipClientTop, window.innerHeight) + 'px'
+                        tooltipEl.style.left = Math.min(tooltipClientLeft, window.innerWidth) + 'px'
                     },
                 },
                 ...(!isBar

diff --git a/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx b/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx
@@ -181,6 +181,7 @@ export function PieChart({
                             tooltipEl.classList.remove('above', 'below', 'no-transform')
                             tooltipEl.classList.add(tooltip.yAlign || 'no-transform')
                             tooltipEl.style.opacity = '1'
+                            tooltipEl.style.display = 'initial'
 
                             if (tooltip.body) {
                                 const referenceDataPoint = tooltip.dataPoints[0] // Use this point as reference to get the date

diff --git a/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx b/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx
@@ -33,6 +33,9 @@ function useWorldMapTooltip(showPersonsModal: boolean): React.RefObject<SVGSVGEl
         const svgRect = svgRef.current?.getBoundingClientRect()
         const tooltipEl = ensureTooltipElement()
         tooltipEl.style.opacity = isTooltipShown ? '1' : '0'
+        if (isTooltipShown) {
+            tooltipEl.style.display = 'initial'
+        }
 
         if (tooltipCoordinates) {
             ReactDOM.render(