Fix: Align tooltip with others element spacing wise

packages/block-editor/src/components/block-mover/button.js

@@ -40,6 +40,21 @@ const getArrowIcon = ( direction, orientation ) => {
 	return null;
 };
 
+const getDirection = ( direction, orientation ) => {
+	if ( direction === 'up' ) {
+		if ( orientation === 'horizontal' ) {
+			return isRTL() ? 'right' : 'left';
+		}
+		return 'up';
+	} else if ( direction === 'down' ) {
+		if ( orientation === 'horizontal' ) {
+			return isRTL() ? 'left' : 'right';
+		}
+		return 'down';
+	}
+	return null;
+};
+
 const getMovementDirectionLabel = ( moveDirection, orientation ) => {
 	if ( moveDirection === 'up' ) {
 		if ( orientation === 'horizontal' ) {
@@ -139,6 +154,7 @@ const BlockMoverButton = forwardRef(
 						direction,
 						orientation
 					) }
+					tooltipPosition={ getDirection( direction, orientation ) }
 					aria-describedby={ descriptionId }
 					{ ...props }
 					onClick={ isDisabled ? null : onClick }

packages/components/src/button/index.tsx

@@ -272,6 +272,7 @@ export function UnforwardedButton(
 					tooltipPosition &&
 					// Convert legacy `position` values to be used with the new `placement` prop
 					positionToPlacement( tooltipPosition ),
+				direction: tooltipPosition,
 		  }
 		: {};
 

packages/components/src/tooltip/index.tsx

@@ -53,7 +53,7 @@ function UnforwardedTooltip(
 		position,
 		shortcut,
 		text,
-
+		direction,
 		...restProps
 	} = props;
 
@@ -93,6 +93,16 @@ function UnforwardedTooltip(
 		placement: computedPlacement,
 		showTimeout: delay,
 	} );
+
+	const getGutterValue = () => {
+		if ( direction === 'up' ) {
+			return 28;
+		} else if ( direction === 'down' ) {
+			return 8;
+		}
+		return 4;
+	};
+
 	const mounted = tooltipStore.useState( 'mounted' );
 
 	if ( isNestedInTooltip ) {
@@ -130,7 +140,7 @@ function UnforwardedTooltip(
 					{ ...restProps }
 					className={ clsx( 'components-tooltip', className ) }
 					unmountOnHide
-					gutter={ 4 }
+					gutter={ getGutterValue() }
 					id={ describedById }
 					overflowPadding={ 0.5 }
 					store={ tooltipStore }

packages/components/src/tooltip/style.scss

@@ -13,4 +13,3 @@
 .components-tooltip__shortcut {
 	margin-left: $grid-unit-10;
 }
-

packages/components/src/tooltip/types.ts

@@ -62,6 +62,10 @@ export type TooltipProps = {
 	 * The text shown in the tooltip when anchor element is focused or hovered.
 	 */
 	text?: string;
+	/**
+	 * The direction of the tooltip arrow.
+	 */
+	direction?: string;
 };
 
 export type TooltipInternalContext = {