Center Tooltip to the appropriate placement point

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,
@@ -107,6 +108,7 @@ const addPopoverToGrandchildren = ( {
 				aria-hidden="true"
 				animate={ false }
 				anchorRef={ anchorRef }
+				offset={ offset }
 			>
 				{ text }
 				<Shortcut
@@ -137,7 +139,7 @@ const emitToChild = ( children, eventName, event ) => {
 function Tooltip( props ) {
 	const {
 		children,
-		position = 'bottom middle',
+		position = 'bottom right',
 		text,
 		shortcut,
 		delay = TOOLTIP_DELAY,
@@ -151,6 +153,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,
@@ -259,14 +265,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,