Move tooltip below the chart when there is limited horizontal space (https://github.com/woocommerce/woocommerce-admin/pull/716)

* Show tooltip below the chart on mobile

* Fix tooltips not correctly centered in bar chart

plugins/woocommerce-admin/client/components/chart/index.js

@@ -19,12 +19,11 @@ import Gridicon from 'gridicons';
  */
 import D3Chart from './charts';
 import Legend from './legend';
+import { WIDE_BREAKPOINT } from './utils';
 import { H, Section } from 'components/section';
 import { gap, gaplarge } from 'stylesheets/abstracts/_variables.scss';
 import { updateQueryString } from 'lib/nav-utils';
 
-const WIDE_BREAKPOINT = 1100;
-
 d3FormatDefaultLocale( {
 	decimal: '.',
 	thousands: ',',

plugins/woocommerce-admin/client/components/chart/style.scss

@@ -90,6 +90,12 @@
 		justify-content: flex-start;
 		pointer-events: none;
 		visibility: hidden;
+		z-index: 1;
+
+		@include breakpoint( '<600px' ) {
+			min-width: auto;
+			width: calc(100% - #{$gap-large * 2});
+		}
 
 		h4 {
 			text-align: left;

plugins/woocommerce-admin/client/components/chart/utils.js

@@ -541,6 +541,55 @@ const handleMouseOutLineChart = ( parentNode, params ) => {
 	params.tooltip.style( 'visibility', 'hidden' );
 };
 
+export const WIDE_BREAKPOINT = 1100;
+
+const calculateTooltipXPosition = (
+	elementCoords,
+	chartCoords,
+	tooltipSize,
+	tooltipMargin,
+	elementWidthRatio
+) => {
+	const xPosition =
+		elementCoords.left + elementCoords.width * elementWidthRatio + tooltipMargin - chartCoords.left;
+
+	if ( chartCoords.width < WIDE_BREAKPOINT ) {
+		return Math.max(
+			tooltipMargin,
+			Math.min(
+				xPosition - tooltipSize.width / 2,
+				chartCoords.width - tooltipSize.width - tooltipMargin
+			)
+		);
+	}
+
+	if ( xPosition + tooltipSize.width + tooltipMargin > chartCoords.width ) {
+		return Math.max(
+			tooltipMargin,
+			elementCoords.left +
+				elementCoords.width * ( 1 - elementWidthRatio ) -
+				tooltipSize.width -
+				tooltipMargin -
+				chartCoords.left
+		);
+	}
+
+	return xPosition;
+};
+
+const calculateTooltipYPosition = ( elementCoords, chartCoords, tooltipSize, tooltipMargin ) => {
+	if ( chartCoords.width < WIDE_BREAKPOINT ) {
+		return chartCoords.height;
+	}
+
+	const yPosition = elementCoords.top + tooltipMargin - chartCoords.top;
+	if ( yPosition + tooltipSize.height + tooltipMargin > chartCoords.height ) {
+		return Math.max( 0, elementCoords.top - tooltipSize.height - tooltipMargin - chartCoords.top );
+	}
+
+	return yPosition;
+};
+
 const calculateTooltipPosition = ( element, chart, elementWidthRatio = 1 ) => {
 	const elementCoords = element.getBoundingClientRect();
 	const chartCoords = chart.getBoundingClientRect();
@@ -549,27 +598,20 @@ const calculateTooltipPosition = ( element, chart, elementWidthRatio = 1 ) => {
 		.getBoundingClientRect();
 	const tooltipMargin = 24;
 
-	let xPosition =
-		elementCoords.left + elementCoords.width * elementWidthRatio + tooltipMargin - chartCoords.left;
-	let yPosition = elementCoords.top + tooltipMargin - chartCoords.top;
-	if ( xPosition + tooltipSize.width + tooltipMargin > chartCoords.width ) {
-		xPosition = Math.max(
-			0,
-			elementCoords.left +
-				elementCoords.width * ( 1 - elementWidthRatio ) -
-				tooltipSize.width -
-				tooltipMargin -
-				chartCoords.left
-		);
-	}
-	if ( yPosition + tooltipSize.height + tooltipMargin > chartCoords.height ) {
-		yPosition = Math.max(
-			0,
-			elementCoords.top - tooltipSize.height - tooltipMargin - chartCoords.top
-		);
+	if ( chartCoords.width < WIDE_BREAKPOINT ) {
+		elementWidthRatio = 0;
 	}
 
-	return { x: xPosition, y: yPosition };
+	return {
+		x: calculateTooltipXPosition(
+			elementCoords,
+			chartCoords,
+			tooltipSize,
+			tooltipMargin,
+			elementWidthRatio
+		),
+		y: calculateTooltipYPosition( elementCoords, chartCoords, tooltipSize, tooltipMargin ),
+	};
 };
 
 export const drawLines = ( node, data, params ) => {