From feb14f24f497de44c49b2d7228f624c97680dabe Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 24 May 2022 15:08:57 +1000
Subject: [PATCH 01/17] ToolTip: Fix positioning by anchoring to child element

---
 packages/components/src/tooltip/index.js   | 48 +++++++++++++++-------
 packages/components/src/tooltip/style.scss |  2 +-
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
index 7bf2d4af2907dc..4343cdcd788779 100644
--- a/packages/components/src/tooltip/index.js
+++ b/packages/components/src/tooltip/index.js
@@ -13,8 +13,9 @@ import {
 	concatChildren,
 	useEffect,
 	useState,
+	useRef,
 } from '@wordpress/element';
-import { useDebounce } from '@wordpress/compose';
+import { useDebounce, useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -31,22 +32,37 @@ export const TOOLTIP_DELAY = 700;
 
 const eventCatcher = <div className="event-catcher" />;
 
-const getDisabledElement = ( { eventHandlers, child, childrenWithPopover } ) =>
-	cloneElement(
+const DisabledElement = ( {
+	eventHandlers,
+	child,
+	childrenWithPopover,
+	anchorRef,
+} ) => {
+	const ref = useMergeRefs( [ anchorRef, child?.ref ] );
+	return cloneElement(
 		<span className="disabled-element-wrapper">
 			{ cloneElement( eventCatcher, eventHandlers ) }
 			{ cloneElement( child, {
 				children: childrenWithPopover,
 			} ) }
 		</span>,
-		eventHandlers
+		{ ...eventHandlers, ref }
 	);
+};
 
-const getRegularElement = ( { child, eventHandlers, childrenWithPopover } ) =>
-	cloneElement( child, {
+const RegularElement = ( {
+	child,
+	eventHandlers,
+	childrenWithPopover,
+	anchorRef,
+} ) => {
+	const ref = useMergeRefs( [ anchorRef, child?.ref ] );
+	return cloneElement( child, {
 		...eventHandlers,
 		children: childrenWithPopover,
+		ref,
 	} );
+};
 
 const addPopoverToGrandchildren = ( {
 	grandchildren,
@@ -54,6 +70,7 @@ const addPopoverToGrandchildren = ( {
 	position,
 	text,
 	shortcut,
+	anchorRef,
 } ) =>
 	concatChildren(
 		grandchildren,
@@ -110,6 +127,7 @@ function Tooltip( props ) {
 	const [ isMouseDown, setIsMouseDown ] = useState( false );
 	const [ isOver, setIsOver ] = useState( false );
 	const delayedSetIsOver = useDebounce( setIsOver, delay );
+	const childRef = useRef( null );
 
 	const createMouseDown = ( event ) => {
 		// Preserve original child callback behavior.
@@ -209,11 +227,10 @@ function Tooltip( props ) {
 
 	const child = Children.only( children );
 	const { children: grandchildren, disabled } = child.props;
-	const getElementWithPopover = disabled
-		? getDisabledElement
-		: getRegularElement;
+	const ElementWithPopover = disabled ? DisabledElement : RegularElement;
 
 	const popoverData = {
+		anchorRef: childRef,
 		isOver,
 		position,
 		text,
@@ -224,11 +241,14 @@ function Tooltip( props ) {
 		...popoverData,
 	} );
 
-	return getElementWithPopover( {
-		child,
-		eventHandlers,
-		childrenWithPopover,
-	} );
+	return (
+		<ElementWithPopover
+			child={ child }
+			eventHandlers={ eventHandlers }
+			childrenWithPopover={ childrenWithPopover }
+			anchorRef={ childRef }
+		/>
+	);
 }
 
 export default Tooltip;
diff --git a/packages/components/src/tooltip/style.scss b/packages/components/src/tooltip/style.scss
index 3de494fa60359e..9a874246568f6b 100644
--- a/packages/components/src/tooltip/style.scss
+++ b/packages/components/src/tooltip/style.scss
@@ -2,7 +2,7 @@
 	z-index: z-index(".components-tooltip");
 
 	.components-popover__content {
-		min-width: 0;
+		min-width: min-content;
 	}
 }
 

From 7e7715ce8523fca3034c1439e4467859a938986e Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 24 May 2022 15:36:04 +1000
Subject: [PATCH 02/17] Fix left/right issue

---
 packages/components/src/popover/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index e93442a70f1b20..a463de013d3d7c 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -55,9 +55,9 @@ const positionToPlacement = ( position ) => {
 
 	if ( [ 'top', 'bottom' ].includes( x ) ) {
 		let suffix = '';
-		if ( ( !! z && z === 'left' ) || y === 'right' ) {
+		if ( ( !! z && z === 'left' ) || y === 'left' ) {
 			suffix = '-start';
-		} else if ( ( !! z && z === 'right' ) || y === 'left' ) {
+		} else if ( ( !! z && z === 'right' ) || y === 'right' ) {
 			suffix = '-end';
 		}
 		return x + suffix;

From a52ee640fbf3459b990d3f7d22d741367a480c79 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 24 May 2022 16:08:15 +1000
Subject: [PATCH 03/17] Switch post schedule and post visiblity to 'bottom
 right' for consistency

---
 .../edit-post/src/components/sidebar/post-schedule/index.js     | 2 +-
 .../edit-post/src/components/sidebar/post-visibility/index.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-post/src/components/sidebar/post-schedule/index.js b/packages/edit-post/src/components/sidebar/post-schedule/index.js
index 7c9021894e26f3..dfd0bd83d0e060 100644
--- a/packages/edit-post/src/components/sidebar/post-schedule/index.js
+++ b/packages/edit-post/src/components/sidebar/post-schedule/index.js
@@ -18,7 +18,7 @@ export default function PostSchedule() {
 				<span>{ __( 'Publish' ) }</span>
 				<Dropdown
 					popoverProps={ { anchorRef } }
-					position="bottom left"
+					position="bottom right"
 					contentClassName="edit-post-post-schedule__dialog"
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<PostScheduleToggle
diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js
index 382d8f810596ee..2b82cacc1f193e 100644
--- a/packages/edit-post/src/components/sidebar/post-visibility/index.js
+++ b/packages/edit-post/src/components/sidebar/post-visibility/index.js
@@ -25,7 +25,7 @@ export function PostVisibility() {
 					) }
 					{ canEdit && (
 						<Dropdown
-							position="bottom left"
+							position="bottom right"
 							contentClassName="edit-post-post-visibility__dialog"
 							popoverProps={ {
 								// Anchor the popover to the middle of the

From a546fdaecc14e59e78daf2ec1000d53c5d17fb05 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 24 May 2022 16:34:31 +1000
Subject: [PATCH 04/17] Move left/right transformation to the ToolTip component

---
 packages/components/src/popover/index.js      |  4 +--
 packages/components/src/tooltip/index.js      | 35 +++++++++++++++++--
 .../components/sidebar/post-schedule/index.js |  2 +-
 .../sidebar/post-visibility/index.js          |  2 +-
 4 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index a463de013d3d7c..e93442a70f1b20 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -55,9 +55,9 @@ const positionToPlacement = ( position ) => {
 
 	if ( [ 'top', 'bottom' ].includes( x ) ) {
 		let suffix = '';
-		if ( ( !! z && z === 'left' ) || y === 'left' ) {
+		if ( ( !! z && z === 'left' ) || y === 'right' ) {
 			suffix = '-start';
-		} else if ( ( !! z && z === 'right' ) || y === 'right' ) {
+		} else if ( ( !! z && z === 'right' ) || y === 'left' ) {
 			suffix = '-end';
 		}
 		return x + suffix;
diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
index 4343cdcd788779..30622215d4aba1 100644
--- a/packages/components/src/tooltip/index.js
+++ b/packages/components/src/tooltip/index.js
@@ -32,6 +32,33 @@ export const TOOLTIP_DELAY = 700;
 
 const eventCatcher = <div className="event-catcher" />;
 
+/**
+ * Convert a position string to a placement string. This logic
+ * is borrowed from the Popover component, with one key difference:
+ *
+ * Here, the 'left' position translates to the '-start' placement and
+ * the 'right' position translates to the '-end' placement. This ensures
+ * that the ToolTip is placed at the expected left/right location.
+ *
+ * @param {string} position A position string such as 'bottom left'
+ * @return {string} A placement string such as 'bottom-start'
+ */
+const positionToPlacement = ( position ) => {
+	const [ x, y, z ] = position.split( ' ' );
+
+	if ( [ 'top', 'bottom' ].includes( x ) ) {
+		let suffix = '';
+		if ( ( !! z && z === 'left' ) || y === 'left' ) {
+			suffix = '-start';
+		} else if ( ( !! z && z === 'right' ) || y === 'right' ) {
+			suffix = '-end';
+		}
+		return x + suffix;
+	}
+
+	return y;
+};
+
 const DisabledElement = ( {
 	eventHandlers,
 	child,
@@ -67,7 +94,7 @@ const RegularElement = ( {
 const addPopoverToGrandchildren = ( {
 	grandchildren,
 	isOver,
-	position,
+	placement,
 	text,
 	shortcut,
 	anchorRef,
@@ -77,7 +104,7 @@ const addPopoverToGrandchildren = ( {
 		isOver && (
 			<Popover
 				focusOnMount={ false }
-				position={ position }
+				placement={ placement }
 				className="components-tooltip"
 				aria-hidden="true"
 				animate={ false }
@@ -229,10 +256,12 @@ function Tooltip( props ) {
 	const { children: grandchildren, disabled } = child.props;
 	const ElementWithPopover = disabled ? DisabledElement : RegularElement;
 
+	const placement = positionToPlacement( position );
+
 	const popoverData = {
 		anchorRef: childRef,
 		isOver,
-		position,
+		placement,
 		text,
 		shortcut,
 	};
diff --git a/packages/edit-post/src/components/sidebar/post-schedule/index.js b/packages/edit-post/src/components/sidebar/post-schedule/index.js
index dfd0bd83d0e060..7c9021894e26f3 100644
--- a/packages/edit-post/src/components/sidebar/post-schedule/index.js
+++ b/packages/edit-post/src/components/sidebar/post-schedule/index.js
@@ -18,7 +18,7 @@ export default function PostSchedule() {
 				<span>{ __( 'Publish' ) }</span>
 				<Dropdown
 					popoverProps={ { anchorRef } }
-					position="bottom right"
+					position="bottom left"
 					contentClassName="edit-post-post-schedule__dialog"
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<PostScheduleToggle
diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js
index 2b82cacc1f193e..382d8f810596ee 100644
--- a/packages/edit-post/src/components/sidebar/post-visibility/index.js
+++ b/packages/edit-post/src/components/sidebar/post-visibility/index.js
@@ -25,7 +25,7 @@ export function PostVisibility() {
 					) }
 					{ canEdit && (
 						<Dropdown
-							position="bottom right"
+							position="bottom left"
 							contentClassName="edit-post-post-visibility__dialog"
 							popoverProps={ {
 								// Anchor the popover to the middle of the

From c70082637f425860353b940c57c338f4f9bbec95 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 24 May 2022 17:02:10 +1000
Subject: [PATCH 05/17] Switch back to functions, fix tests

---
 packages/components/src/tooltip/index.js      | 44 ++++++++++++-------
 packages/components/src/tooltip/test/index.js |  2 +-
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
index 30622215d4aba1..38f32cfeacc7f8 100644
--- a/packages/components/src/tooltip/index.js
+++ b/packages/components/src/tooltip/index.js
@@ -59,13 +59,12 @@ const positionToPlacement = ( position ) => {
 	return y;
 };
 
-const DisabledElement = ( {
+const getDisabledElement = ( {
 	eventHandlers,
 	child,
 	childrenWithPopover,
 	anchorRef,
 } ) => {
-	const ref = useMergeRefs( [ anchorRef, child?.ref ] );
 	return cloneElement(
 		<span className="disabled-element-wrapper">
 			{ cloneElement( eventCatcher, eventHandlers ) }
@@ -73,21 +72,20 @@ const DisabledElement = ( {
 				children: childrenWithPopover,
 			} ) }
 		</span>,
-		{ ...eventHandlers, ref }
+		{ ...eventHandlers, ref: anchorRef }
 	);
 };
 
-const RegularElement = ( {
+const getRegularElement = ( {
 	child,
 	eventHandlers,
 	childrenWithPopover,
-	anchorRef,
+	mergedRefs,
 } ) => {
-	const ref = useMergeRefs( [ anchorRef, child?.ref ] );
 	return cloneElement( child, {
 		...eventHandlers,
 		children: childrenWithPopover,
-		ref,
+		ref: mergedRefs,
 	} );
 };
 
@@ -155,6 +153,10 @@ function Tooltip( props ) {
 	const [ isOver, setIsOver ] = useState( false );
 	const delayedSetIsOver = useDebounce( setIsOver, delay );
 	const childRef = useRef( null );
+	const mergedChildRefs = useMergeRefs( [
+		childRef,
+		Children.toArray( children )[ 0 ]?.ref,
+	] );
 
 	const createMouseDown = ( event ) => {
 		// Preserve original child callback behavior.
@@ -254,7 +256,9 @@ function Tooltip( props ) {
 
 	const child = Children.only( children );
 	const { children: grandchildren, disabled } = child.props;
-	const ElementWithPopover = disabled ? DisabledElement : RegularElement;
+	const getElementWithPopover = disabled
+		? getDisabledElement
+		: getRegularElement;
 
 	const placement = positionToPlacement( position );
 
@@ -270,14 +274,22 @@ function Tooltip( props ) {
 		...popoverData,
 	} );
 
-	return (
-		<ElementWithPopover
-			child={ child }
-			eventHandlers={ eventHandlers }
-			childrenWithPopover={ childrenWithPopover }
-			anchorRef={ childRef }
-		/>
-	);
+	// return (
+	// 	<ElementWithPopover
+	// 		child={ child }
+	// 		eventHandlers={ eventHandlers }
+	// 		childrenWithPopover={ childrenWithPopover }
+	// 		anchorRef={ childRef }
+	// 	/>
+	// );
+
+	return getElementWithPopover( {
+		child,
+		eventHandlers,
+		childrenWithPopover,
+		anchorRef: childRef,
+		mergedRefs: mergedChildRefs,
+	} );
 }
 
 export default Tooltip;
diff --git a/packages/components/src/tooltip/test/index.js b/packages/components/src/tooltip/test/index.js
index 4935809ee6329d..a330c0a964d921 100644
--- a/packages/components/src/tooltip/test/index.js
+++ b/packages/components/src/tooltip/test/index.js
@@ -57,7 +57,7 @@ describe( 'Tooltip', () => {
 			expect( button.childAt( 0 ).text() ).toBe( 'Hover Me!' );
 			expect( button.childAt( 1 ).name() ).toBe( 'ForwardRef(Popover)' );
 			expect( popover.prop( 'focusOnMount' ) ).toBe( false );
-			expect( popover.prop( 'position' ) ).toBe( 'bottom right' );
+			expect( popover.prop( 'placement' ) ).toBe( 'bottom-end' );
 			expect( popover.children().first().text() ).toBe( 'Help text' );
 		} );
 

From ec06c72de93e05c19104ec56b985e1dde4d327fc Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 24 May 2022 17:04:07 +1000
Subject: [PATCH 06/17] Tidy up

---
 packages/components/src/tooltip/index.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
index 38f32cfeacc7f8..20734792c3476a 100644
--- a/packages/components/src/tooltip/index.js
+++ b/packages/components/src/tooltip/index.js
@@ -274,15 +274,6 @@ function Tooltip( props ) {
 		...popoverData,
 	} );
 
-	// return (
-	// 	<ElementWithPopover
-	// 		child={ child }
-	// 		eventHandlers={ eventHandlers }
-	// 		childrenWithPopover={ childrenWithPopover }
-	// 		anchorRef={ childRef }
-	// 	/>
-	// );
-
 	return getElementWithPopover( {
 		child,
 		eventHandlers,

From a57bc9dda384944338b71f502ef7a899e6bcb36e Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 24 May 2022 17:25:14 +1000
Subject: [PATCH 07/17] Add changelog entry

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index da1c74e33a7638..92c1d75882e590 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -9,6 +9,7 @@
 -   `ComboboxControl`: use custom prefix when generating the instanceId ([#42134](https://github.com/WordPress/gutenberg/pull/42134).
 -   `Popover`: pass missing anchor ref to the `getAnchorRect` callback prop. ([#42076](https://github.com/WordPress/gutenberg/pull/42076)).
 -   `Popover`: call `getAnchorRect` callback prop even if `anchorRefFallback` has no value. ([#42329](https://github.com/WordPress/gutenberg/pull/42329)).
+-   Fix `ToolTip` position to ensure it is always positioned relative to the first child of the ToolTip. ([#41268](https://github.com/WordPress/gutenberg/pull/41268))
 
 ### Internal
 

From 338b2aa446b96a10186bac576fb5adfb233dae3a Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 25 May 2022 17:02:41 +1000
Subject: [PATCH 08/17] Center Tooltip to the appropriate placement point

---
 packages/components/src/tooltip/index.js | 30 ++++++++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
index 20734792c3476a..4ce656c63fee3b 100644
--- a/packages/components/src/tooltip/index.js
+++ b/packages/components/src/tooltip/index.js
@@ -90,12 +90,13 @@ const getRegularElement = ( {
 };
 
 const addPopoverToGrandchildren = ( {
+	anchorRef,
 	grandchildren,
 	isOver,
+	offset,
 	placement,
-	text,
 	shortcut,
-	anchorRef,
+	text,
 } ) =>
 	concatChildren(
 		grandchildren,
@@ -106,7 +107,8 @@ const addPopoverToGrandchildren = ( {
 				className="components-tooltip"
 				aria-hidden="true"
 				animate={ false }
-				offset={ 12 }
+				offset={ offset }
+				anchorRef={ anchorRef }
 				__unstableShift
 			>
 				{ text }
@@ -138,7 +140,7 @@ const emitToChild = ( children, eventName, event ) => {
 function Tooltip( props ) {
 	const {
 		children,
-		position = 'bottom middle',
+		position = 'bottom right',
 		text,
 		shortcut,
 		delay = TOOLTIP_DELAY,
@@ -152,6 +154,10 @@ function Tooltip( props ) {
 	const [ isMouseDown, setIsMouseDown ] = useState( false );
 	const [ isOver, setIsOver ] = useState( false );
 	const delayedSetIsOver = useDebounce( setIsOver, delay );
+
+	// Create a reference to the Tooltip's child, to be passed to the Popover
+	// so that the Tooltip can be correctly positioned. Also, merge with the
+	// existing ref for the first child, so that its ref is preserved.
 	const childRef = useRef( null );
 	const mergedChildRefs = useMergeRefs( [
 		childRef,
@@ -260,14 +266,28 @@ function Tooltip( props ) {
 		? getDisabledElement
 		: getRegularElement;
 
+	// Transform the Tooltip's position property to the relevant
+	// placement point to be passed to the Popover.
 	const placement = positionToPlacement( position );
 
+	// To adequately support the Tooltip's position property,
+	// this function centers the Tooltip to the specified placement point.
+	// For example, setting the "bottom left" position will center the Tooltip
+	// at the bottom left corner of the Tooltip's first child.
+	const positionOffset = ( { floating } ) =>
+		floating?.width
+			? {
+					alignmentAxis: -floating.width / 2,
+			  }
+			: {};
+
 	const popoverData = {
 		anchorRef: childRef,
 		isOver,
+		offset: position ? positionOffset : undefined,
 		placement,
-		text,
 		shortcut,
+		text,
 	};
 	const childrenWithPopover = addPopoverToGrandchildren( {
 		grandchildren,

From c09a8b27f483a9962586fbec191ef4dbb58b7fa6 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 11 Jul 2022 16:31:30 +1000
Subject: [PATCH 09/17] Attempt to simplify the implementation

---
 packages/components/src/tooltip/index.js | 50 ++----------------------
 1 file changed, 4 insertions(+), 46 deletions(-)

diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
index 4ce656c63fee3b..ad6b3fc2b6a2a6 100644
--- a/packages/components/src/tooltip/index.js
+++ b/packages/components/src/tooltip/index.js
@@ -32,33 +32,6 @@ export const TOOLTIP_DELAY = 700;
 
 const eventCatcher = <div className="event-catcher" />;
 
-/**
- * Convert a position string to a placement string. This logic
- * is borrowed from the Popover component, with one key difference:
- *
- * Here, the 'left' position translates to the '-start' placement and
- * the 'right' position translates to the '-end' placement. This ensures
- * that the ToolTip is placed at the expected left/right location.
- *
- * @param {string} position A position string such as 'bottom left'
- * @return {string} A placement string such as 'bottom-start'
- */
-const positionToPlacement = ( position ) => {
-	const [ x, y, z ] = position.split( ' ' );
-
-	if ( [ 'top', 'bottom' ].includes( x ) ) {
-		let suffix = '';
-		if ( ( !! z && z === 'left' ) || y === 'left' ) {
-			suffix = '-start';
-		} else if ( ( !! z && z === 'right' ) || y === 'right' ) {
-			suffix = '-end';
-		}
-		return x + suffix;
-	}
-
-	return y;
-};
-
 const getDisabledElement = ( {
 	eventHandlers,
 	child,
@@ -94,7 +67,7 @@ const addPopoverToGrandchildren = ( {
 	grandchildren,
 	isOver,
 	offset,
-	placement,
+	position,
 	shortcut,
 	text,
 } ) =>
@@ -103,7 +76,7 @@ const addPopoverToGrandchildren = ( {
 		isOver && (
 			<Popover
 				focusOnMount={ false }
-				placement={ placement }
+				position={ position }
 				className="components-tooltip"
 				aria-hidden="true"
 				animate={ false }
@@ -266,26 +239,11 @@ function Tooltip( props ) {
 		? getDisabledElement
 		: getRegularElement;
 
-	// Transform the Tooltip's position property to the relevant
-	// placement point to be passed to the Popover.
-	const placement = positionToPlacement( position );
-
-	// To adequately support the Tooltip's position property,
-	// this function centers the Tooltip to the specified placement point.
-	// For example, setting the "bottom left" position will center the Tooltip
-	// at the bottom left corner of the Tooltip's first child.
-	const positionOffset = ( { floating } ) =>
-		floating?.width
-			? {
-					alignmentAxis: -floating.width / 2,
-			  }
-			: {};
-
 	const popoverData = {
 		anchorRef: childRef,
 		isOver,
-		offset: position ? positionOffset : undefined,
-		placement,
+		offset: 4,
+		position,
 		shortcut,
 		text,
 	};

From a0ba72d9b6be1b899eeec7b38dc0a478c1114686 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 11 Jul 2022 16:35:02 +1000
Subject: [PATCH 10/17] Revert change to test

---
 packages/components/src/tooltip/test/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tooltip/test/index.js b/packages/components/src/tooltip/test/index.js
index a330c0a964d921..4935809ee6329d 100644
--- a/packages/components/src/tooltip/test/index.js
+++ b/packages/components/src/tooltip/test/index.js
@@ -57,7 +57,7 @@ describe( 'Tooltip', () => {
 			expect( button.childAt( 0 ).text() ).toBe( 'Hover Me!' );
 			expect( button.childAt( 1 ).name() ).toBe( 'ForwardRef(Popover)' );
 			expect( popover.prop( 'focusOnMount' ) ).toBe( false );
-			expect( popover.prop( 'placement' ) ).toBe( 'bottom-end' );
+			expect( popover.prop( 'position' ) ).toBe( 'bottom right' );
 			expect( popover.children().first().text() ).toBe( 'Help text' );
 		} );
 

From 6fc7d73f111f87ce2c68c36bcccfa494dd4e72b3 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 12 Jul 2022 12:30:31 +1000
Subject: [PATCH 11/17] Revert default back to middle position

---
 packages/components/src/tooltip/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
index ad6b3fc2b6a2a6..6351dbea918653 100644
--- a/packages/components/src/tooltip/index.js
+++ b/packages/components/src/tooltip/index.js
@@ -113,7 +113,7 @@ const emitToChild = ( children, eventName, event ) => {
 function Tooltip( props ) {
 	const {
 		children,
-		position = 'bottom right',
+		position = 'bottom middle',
 		text,
 		shortcut,
 		delay = TOOLTIP_DELAY,

From 5131ea80f76e1ee569b3200aa1f0f107946ff71b Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 12 Jul 2022 17:26:27 +1000
Subject: [PATCH 12/17] Fix error with getDisabledElement

---
 packages/components/src/tooltip/index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
index 6351dbea918653..ba6e577c15a3bf 100644
--- a/packages/components/src/tooltip/index.js
+++ b/packages/components/src/tooltip/index.js
@@ -36,7 +36,7 @@ const getDisabledElement = ( {
 	eventHandlers,
 	child,
 	childrenWithPopover,
-	anchorRef,
+	mergedRefs,
 } ) => {
 	return cloneElement(
 		<span className="disabled-element-wrapper">
@@ -45,7 +45,7 @@ const getDisabledElement = ( {
 				children: childrenWithPopover,
 			} ) }
 		</span>,
-		{ ...eventHandlers, ref: anchorRef }
+		{ ...eventHandlers, ref: mergedRefs }
 	);
 };
 
@@ -256,7 +256,6 @@ function Tooltip( props ) {
 		child,
 		eventHandlers,
 		childrenWithPopover,
-		anchorRef: childRef,
 		mergedRefs: mergedChildRefs,
 	} );
 }

From b903d19ea1ae1fe343562968925c70f53ae9f2ae Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 13 Jul 2022 12:48:28 +1000
Subject: [PATCH 13/17] Move ref in disabled element to the cloned child
 element

---
 packages/components/src/tooltip/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
index ba6e577c15a3bf..ac5641476ac4c0 100644
--- a/packages/components/src/tooltip/index.js
+++ b/packages/components/src/tooltip/index.js
@@ -43,9 +43,10 @@ const getDisabledElement = ( {
 			{ cloneElement( eventCatcher, eventHandlers ) }
 			{ cloneElement( child, {
 				children: childrenWithPopover,
+				ref: mergedRefs,
 			} ) }
 		</span>,
-		{ ...eventHandlers, ref: mergedRefs }
+		{ ...eventHandlers }
 	);
 };
 

From 4f67e5bc1a96e7aa46d33bc5cb55d3f3c3ae9850 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 13 Jul 2022 15:11:46 +1000
Subject: [PATCH 14/17] Update Storybook example with a small target to better
 demonstrate positioning issues

---
 .../components/src/tooltip/stories/index.js   | 44 ++++++++++++++-----
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/tooltip/stories/index.js b/packages/components/src/tooltip/stories/index.js
index 5bb0166c2e5511..db35a75635fd05 100644
--- a/packages/components/src/tooltip/stories/index.js
+++ b/packages/components/src/tooltip/stories/index.js
@@ -32,22 +32,42 @@ export const _default = () => {
 		'bottom right': 'bottom right',
 	};
 	const tooltipText = text( 'Text', 'More information' );
+	const longTooltipText = text( 'Text', 'Long explanatory information' );
 	const position = select( 'Position', positionOptions, 'top center' );
 	const delay = number( 'Delay', 700 );
 	return (
-		<Tooltip text={ tooltipText } position={ position } delay={ delay }>
-			<div
-				style={ {
-					margin: '50px auto',
-					width: '200px',
-					padding: '20px',
-					textAlign: 'center',
-					border: '1px solid #ccc',
-				} }
+		<>
+			<Tooltip text={ tooltipText } position={ position } delay={ delay }>
+				<div
+					style={ {
+						margin: '50px auto',
+						width: '200px',
+						padding: '20px',
+						textAlign: 'center',
+						border: '1px solid #ccc',
+					} }
+				>
+					Hover for more information
+				</div>
+			</Tooltip>
+			<Tooltip
+				text={ longTooltipText }
+				position={ position }
+				delay={ delay }
 			>
-				Hover for more information
-			</div>
-		</Tooltip>
+				<div
+					style={ {
+						margin: '50px auto',
+						width: 'min-content',
+						padding: '4px',
+						textAlign: 'center',
+						border: '1px solid #ccc',
+					} }
+				>
+					Small target
+				</div>
+			</Tooltip>
+		</>
 	);
 };
 

From 94542263c31d3d78160af706a5c7a12a7692e2e7 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 13 Jul 2022 15:24:20 +1000
Subject: [PATCH 15/17] Simplify Tooltip story slightly

---
 packages/components/src/tooltip/stories/index.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/components/src/tooltip/stories/index.js b/packages/components/src/tooltip/stories/index.js
index db35a75635fd05..a76b69731b41a6 100644
--- a/packages/components/src/tooltip/stories/index.js
+++ b/packages/components/src/tooltip/stories/index.js
@@ -32,7 +32,6 @@ export const _default = () => {
 		'bottom right': 'bottom right',
 	};
 	const tooltipText = text( 'Text', 'More information' );
-	const longTooltipText = text( 'Text', 'Long explanatory information' );
 	const position = select( 'Position', positionOptions, 'top center' );
 	const delay = number( 'Delay', 700 );
 	return (
@@ -50,11 +49,7 @@ export const _default = () => {
 					Hover for more information
 				</div>
 			</Tooltip>
-			<Tooltip
-				text={ longTooltipText }
-				position={ position }
-				delay={ delay }
-			>
+			<Tooltip text={ tooltipText } position={ position } delay={ delay }>
 				<div
 					style={ {
 						margin: '50px auto',

From 90f5541074b829d40000979bb18d3ffcba925043 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 14 Jul 2022 14:08:04 +1000
Subject: [PATCH 16/17] Consolidate child const for both uses

---
 packages/components/src/tooltip/index.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
index ac5641476ac4c0..0e20fa9e440bb7 100644
--- a/packages/components/src/tooltip/index.js
+++ b/packages/components/src/tooltip/index.js
@@ -133,10 +133,8 @@ function Tooltip( props ) {
 	// so that the Tooltip can be correctly positioned. Also, merge with the
 	// existing ref for the first child, so that its ref is preserved.
 	const childRef = useRef( null );
-	const mergedChildRefs = useMergeRefs( [
-		childRef,
-		Children.toArray( children )[ 0 ]?.ref,
-	] );
+	const child = Children.toArray( children )[ 0 ];
+	const mergedChildRefs = useMergeRefs( [ childRef, child?.ref ] );
 
 	const createMouseDown = ( event ) => {
 		// Preserve original child callback behavior.
@@ -234,7 +232,6 @@ function Tooltip( props ) {
 		onMouseDown: createMouseEvent( 'mouseDown' ),
 	};
 
-	const child = Children.only( children );
 	const { children: grandchildren, disabled } = child.props;
 	const getElementWithPopover = disabled
 		? getDisabledElement

From 88f9e6c84fa54252fa104b7f3113e9f6c2c423d1 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 14 Jul 2022 14:20:02 +1000
Subject: [PATCH 17/17] Revert previous change, but add a named const for the
 existing child ref for clarity

---
 packages/components/src/tooltip/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
index 0e20fa9e440bb7..1521b10a29c308 100644
--- a/packages/components/src/tooltip/index.js
+++ b/packages/components/src/tooltip/index.js
@@ -133,8 +133,8 @@ function Tooltip( props ) {
 	// so that the Tooltip can be correctly positioned. Also, merge with the
 	// existing ref for the first child, so that its ref is preserved.
 	const childRef = useRef( null );
-	const child = Children.toArray( children )[ 0 ];
-	const mergedChildRefs = useMergeRefs( [ childRef, child?.ref ] );
+	const existingChildRef = Children.toArray( children )[ 0 ]?.ref;
+	const mergedChildRefs = useMergeRefs( [ childRef, existingChildRef ] );
 
 	const createMouseDown = ( event ) => {
 		// Preserve original child callback behavior.
@@ -232,6 +232,7 @@ function Tooltip( props ) {
 		onMouseDown: createMouseEvent( 'mouseDown' ),
 	};
 
+	const child = Children.only( children );
 	const { children: grandchildren, disabled } = child.props;
 	const getElementWithPopover = disabled
 		? getDisabledElement