fix(tooltips): fix tooltips on dashboards (#19473)

PostHog · Dec 21, 2023 · 8865be4 · 8865be4
1 parent 2f142b1
commit 8865be4
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 21 deletions.
diff --git a/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx b/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx
@@ -166,7 +166,6 @@ export const LineGraph = (): JSX.Element => {
                         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
@@ -225,8 +224,8 @@ export const LineGraph = (): JSX.Element => {
                                 ? 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 = Math.min(tooltipClientTop, window.innerHeight) + 'px'
-                        tooltipEl.style.left = Math.min(tooltipClientLeft, window.innerWidth) + 'px'
+                        tooltipEl.style.top = tooltipClientTop + 'px'
+                        tooltipEl.style.left = tooltipClientLeft + 'px'
                     },
                 },
             },

diff --git a/frontend/src/scenes/funnels/useFunnelTooltip.tsx b/frontend/src/scenes/funnels/useFunnelTooltip.tsx
@@ -112,9 +112,6 @@ export function useFunnelTooltip(showPersonsModal: boolean): React.RefObject<HTM
         const svgRect = vizRef.current?.getBoundingClientRect()
         const [tooltipRoot, tooltipEl] = ensureTooltip()
         tooltipEl.style.opacity = isTooltipShown ? '1' : '0'
-        if (isTooltipShown) {
-            tooltipEl.style.display = 'initial'
-        }
         const tooltipRect = tooltipEl.getBoundingClientRect()
         if (tooltipOrigin) {
             tooltipRoot.render(

diff --git a/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx b/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx
@@ -43,9 +43,6 @@ function useBoldNumberTooltip({
 
     useLayoutEffect(() => {
         tooltipEl.style.opacity = isTooltipShown ? '1' : '0'
-        if (isTooltipShown) {
-            tooltipEl.style.display = 'initial'
-        }
 
         const seriesResult = insightData?.result?.[0]
 
@@ -73,10 +70,10 @@ function useBoldNumberTooltip({
     useEffect(() => {
         const tooltipRect = tooltipEl.getBoundingClientRect()
         if (divRect) {
-            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`
+            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`
         }
     })
 

diff --git a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
@@ -51,7 +51,6 @@ export function ensureTooltip(): [Root, HTMLElement] {
             tooltipEl = document.createElement('div')
             tooltipEl.id = 'InsightTooltipWrapper'
             tooltipEl.classList.add('InsightTooltipWrapper')
-            tooltipEl.style.display = 'none'
             document.body.appendChild(tooltipEl)
         }
 
@@ -461,7 +460,6 @@ 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
@@ -549,8 +547,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 = Math.min(tooltipClientTop, window.innerHeight) + 'px'
-                        tooltipEl.style.left = Math.min(tooltipClientLeft, window.innerWidth) + 'px'
+                        tooltipEl.style.top = tooltipClientTop + 'px'
+                        tooltipEl.style.left = tooltipClientLeft + 'px'
                     },
                 },
                 ...(!isBar

diff --git a/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx b/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx
@@ -203,7 +203,6 @@ 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
@@ -36,9 +36,6 @@ function useWorldMapTooltip(showPersonsModal: boolean): React.RefObject<SVGSVGEl
 
     useEffect(() => {
         tooltipEl.style.opacity = isTooltipShown ? '1' : '0'
-        if (isTooltipShown) {
-            tooltipEl.style.display = 'initial'
-        }
 
         if (tooltipCoordinates) {
             tooltipRoot.render(