Attempt to simplify the implementation

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,
 	};