Fixed tooltip alignment in mobile settings view (#7515)

Made tooltip design aligned with Wordpress/tooltip and made it mobile-compatible

changelog/fix-6950-fix-imp-mobile-tooltip

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fixed tooltip alignment for mobile view in payment settings

client/components/tooltip/style.scss

@@ -52,21 +52,6 @@
 		padding: 10px;
 		text-align: center;
 
-		&::after {
-			content: ' ';
-			position: absolute;
-
-			// assuming all the tooltips are displayed at the top of the wrapped element.
-			// no need to complicate things since that's the only use case at the moment.
-			bottom: 0;
-			left: 50%;
-			transform: translate( -50%, 22px );
-			border: solid 15px transparent;
-			border-top-color: $gray-900;
-			// Ensure the tooltip arrow does not obscure the mouse target element.
-			pointer-events: none;
-		}
-
 		a {
 			color: var( --wp-admin-theme-color, $gutenberg-blue );
 		}

client/components/tooltip/tooltip-base.tsx

@@ -223,9 +223,18 @@ const TooltipBase: React.FC< TooltipBaseProps > = ( {
 				wrappedElement.offsetWidth / 2 + wrappedElementRect.left;
 			const tooltipWidth = tooltipElement.offsetWidth;
 			let tooltipLeft = elementMiddle - tooltipWidth / 2;
+			const tooltipRight =
+				window.innerWidth -
+				( wrappedElementRect.left + tooltipElement.offsetWidth );
+
 			if ( tooltipLeft < 0 ) {
-				tooltipLeft = 10;
+				// create a gap with the left edge if the element is out of view port
+				tooltipLeft = 45;
+			} else if ( tooltipRight < 0 ) {
+				// create a gap with the right edge if the element is out of view port
+				tooltipLeft = tooltipLeft - 85;
 			}
+
 			tooltipElement.style.left = `${ tooltipLeft }px`;
 
 			// make it visible only after all the calculations are done.