From dc8ecf2e6a72e4f979262c1c953e1d795f16e14b Mon Sep 17 00:00:00 2001
From: Alex P <alex.pantec@gmail.com>
Date: Wed, 23 Feb 2022 08:42:29 +0200
Subject: [PATCH] Use question mark tooltips

---
 .../ppcp-onboarding/assets/css/onboarding.css |  4 +++
 .../src/Render/OnboardingOptionsRenderer.php  | 34 ++++++++++++-------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/modules/ppcp-onboarding/assets/css/onboarding.css b/modules/ppcp-onboarding/assets/css/onboarding.css
index 084b96a22..20bff5dc7 100644
--- a/modules/ppcp-onboarding/assets/css/onboarding.css
+++ b/modules/ppcp-onboarding/assets/css/onboarding.css
@@ -128,3 +128,7 @@ ul.ppcp-onboarding-options-sublist {
 .ppcp-onboarding-cards-screen img {
 	width: 100%;
 }
+
+.woocommerce-help-tip.ppcp-table-row-tooltip {
+	margin-left: -20px !important;
+}
diff --git a/modules/ppcp-onboarding/src/Render/OnboardingOptionsRenderer.php b/modules/ppcp-onboarding/src/Render/OnboardingOptionsRenderer.php
index be69cf4ce..5c21938bc 100644
--- a/modules/ppcp-onboarding/src/Render/OnboardingOptionsRenderer.php
+++ b/modules/ppcp-onboarding/src/Render/OnboardingOptionsRenderer.php
@@ -93,18 +93,18 @@ class OnboardingOptionsRenderer {
 				),
 				$this->render_table_row(
 					__( 'Seller Account Type', 'woocommerce-paypal-payments' ),
-					__( 'Business', 'woocommerce-paypal-payments' )
+					__( 'Business', 'woocommerce-paypal-payments' ),
+					__( 'For Standard payments, Casual sellers may connect their Personal PayPal account in eligible countries to sell on WooCommerce. For Advanced payments, a Business PayPal account is required.', 'woocommerce-paypal-payments' )
 				),
 			);
 			$items[]        = '
 <li>
-	<label' .
-				' title="' . __( 'PayPal acts as the payment processor for card transactions. You can add optional features like Chargeback Protection for more security.', 'woocommerce-paypal-payments' ) . '"'
-				. '>
+	<label>
 		<input type="radio" id="ppcp-onboarding-dcc-acdc" name="ppcp_onboarding_dcc" value="acdc" checked ' .
 				'data-screen-url="' . $this->get_screen_url( 'acdc' ) . '"> ' .
 			__( 'Advanced Card Processing', 'woocommerce-paypal-payments' ) . '
 	</label>
+	' . $this->render_tooltip( __( 'PayPal acts as the payment processor for card transactions. You can add optional features like Chargeback Protection for more security.', 'woocommerce-paypal-payments' ) ) . '
 	<table>
 		' . implode( '', $dcc_table_rows ) . '
 	</table>
@@ -128,21 +128,20 @@ class OnboardingOptionsRenderer {
 			),
 			$this->render_table_row(
 				__( 'Seller Account Type', 'woocommerce-paypal-payments' ),
-				__( 'Business or Personal', 'woocommerce-paypal-payments' ),
+				__( 'Business or Casual', 'woocommerce-paypal-payments' ),
 				__( 'For Standard payments, Casual sellers may connect their Personal PayPal account in eligible countries to sell on WooCommerce. For Advanced payments, a Business PayPal account is required.', 'woocommerce-paypal-payments' )
 			),
 		);
 		$items[]          = '
 <li ' . ( ! $is_shop_supports_dcc ? 'style="display: none;"' : '' ) . '>
-	<label ' .
-			' title="' . __( 'Card transactions are managed by PayPal, which simplifies compliance requirements for you.', 'woocommerce-paypal-payments' ) . '"'
-			. '>
+	<label>
 		<input type="radio" id="ppcp-onboarding-dcc-basic" name="ppcp_onboarding_dcc" value="basic" ' .
 			( ! $is_shop_supports_dcc ? 'checked' : '' ) .
 			' data-screen-url="' . $this->get_screen_url( 'basic' ) . '"' .
 			'> ' .
 		__( 'Standard Card Processing', 'woocommerce-paypal-payments' ) . '
 	</label>
+	' . $this->render_tooltip( __( 'Card transactions are managed by PayPal, which simplifies compliance requirements for you.', 'woocommerce-paypal-payments' ) ) . '
 	<table>
 		' . implode( $basic_table_rows ) . '
 	</table>
@@ -175,18 +174,29 @@ class OnboardingOptionsRenderer {
 			$value_html .= '<br/><span class="ppcp-muted-text">' . $note . '</span>';
 		}
 
-		$row_attributes_html = '';
+		$tooltip_html = '';
 		if ( $tooltip ) {
-			$row_attributes_html .= 'title="' . $tooltip . '"';
+			$tooltip_html = $this->render_tooltip( $tooltip, array( 'ppcp-table-row-tooltip' ) );
 		}
 
 		return "
-<tr $row_attributes_html>
-	<td>$header</td>
+<tr>
+	<td>$tooltip_html $header</td>
 	<td>$value_html</td>
 </tr>";
 	}
 
+	/**
+	 * Returns HTML of a tooltip (question mark icon).
+	 *
+	 * @param string   $tooltip The text shown on hover.
+	 * @param string[] $classes Additional CSS classes.
+	 * @return string
+	 */
+	private function render_tooltip( string $tooltip, array $classes = array() ): string {
+		return '<span class="woocommerce-help-tip ' . implode( ' ', $classes ) . '" data-tip="' . esc_attr( $tooltip ) . '"></span> ';
+	}
+
 	/**
 	 * Returns the screen image URL.
 	 *