Tooltip staying on charts (#97182)

* Add some extra spacing to the chart labels and remove the debounce. Causing the tooltip to not destroy * Add min width to the tooltip
Automattic · Dec 6, 2024 · e11e16c · e11e16c
1 parent 11fd5f6
commit e11e16c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/client/my-sites/promote-post-i2/components/campaign-item-details/style.scss b/client/my-sites/promote-post-i2/components/campaign-item-details/style.scss
@@ -1306,6 +1306,7 @@ $break-huge-collapsed-menu: $break-huge - 222px;
 		border-radius: 4px;
 		display: none;
 		text-align: center;
+		min-width: 60px;
 	}
 
 	&__chart-tooltip-date {

diff --git a/...mote-post-i2/components/campaign-stats-line-chart/index.tsx/campaign-stats-line-chart.tsx b/...mote-post-i2/components/campaign-stats-line-chart/index.tsx/campaign-stats-line-chart.tsx
@@ -100,7 +100,7 @@ const CampaignStatsLineChart = ( { data, source, resolution }: GraphProps ) => {
 					ticks: {
 						show: false,
 					},
-					gap: 12,
+					gap: 16,
 					values: ( u: uPlot, splits: number[] ) => {
 						// Filter the splits to show only non-overlapping labels
 						return splits.map( ( s, i ) =>
@@ -117,7 +117,7 @@ const CampaignStatsLineChart = ( { data, source, resolution }: GraphProps ) => {
 					ticks: {
 						show: false,
 					},
-					gap: 12,
+					gap: 16,
 				},
 			],
 			cursor: {

diff --git a/client/my-sites/promote-post-i2/components/campaign-stats-line-chart/index.tsx/tooltip.tsx b/client/my-sites/promote-post-i2/components/campaign-stats-line-chart/index.tsx/tooltip.tsx
@@ -1,4 +1,3 @@
-import { debounce } from 'lodash';
 import React from 'react';
 import uPlot from 'uplot';
 
@@ -15,11 +14,12 @@ export function tooltip(
 				if ( ! tooltipRef.current ) {
 					tooltipRef.current = document.createElement( 'div' );
 					tooltipRef.current.className = 'campaign-item-details__chart-tooltip';
+					tooltipRef.current.style.display = 'none';
 					u.over.parentNode?.appendChild( tooltipRef.current );
 				}
 
 				// Wrap mouse move in a Debounce to reduce the number of updates
-				const handleMouseMove = debounce( ( e ) => {
+				const handleMouseMove = ( e: MouseEvent ) => {
 					if ( ! tooltipRef?.current ) {
 						return;
 					}
@@ -78,7 +78,7 @@ export function tooltip(
 					} else if ( tooltipRef.current ) {
 						tooltipRef.current.style.display = 'none';
 					}
-				}, 8 ); // 120mhz (1000/120 = 8.333ms)
+				};
 
 				u.over.addEventListener( 'mousemove', handleMouseMove );
 				u.over.addEventListener( 'mouseleave', () => {