From 8865be443ef0581607c4f778b27d8f3a4547012a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Oberm=C3=BCller?= Date: Thu, 21 Dec 2023 13:29:55 +0100 Subject: [PATCH] fix(tooltips): fix tooltips on dashboards (#19473) --- .../DataVisualization/Components/Charts/LineGraph.tsx | 5 ++--- frontend/src/scenes/funnels/useFunnelTooltip.tsx | 3 --- .../scenes/insights/views/BoldNumber/BoldNumber.tsx | 11 ++++------- .../src/scenes/insights/views/LineGraph/LineGraph.tsx | 6 ++---- .../src/scenes/insights/views/LineGraph/PieChart.tsx | 1 - .../src/scenes/insights/views/WorldMap/WorldMap.tsx | 3 --- 6 files changed, 8 insertions(+), 21 deletions(-) diff --git a/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx b/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx index 0d2e76f3d8ff1..3869c45c89615 100644 --- 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 index d6faa42f4e8ac..237d2e14ff4e4 100644 --- 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 { 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 index 4683c4722ad45..83a60db5419c2 100644 --- 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 index 1cce2e9c26ebe..552daf3ff7830 100644 --- 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 index 5085cfd419acd..a2e37bfaaded0 100644 --- 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 { tooltipEl.style.opacity = isTooltipShown ? '1' : '0' - if (isTooltipShown) { - tooltipEl.style.display = 'initial' - } if (tooltipCoordinates) { tooltipRoot.render(