From c0171959f84e655b615ac41ecc1deb869aa9fba1 Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Thu, 20 Jun 2024 01:11:34 +0530
Subject: [PATCH] Add tooltip to typography variations

---
 .../variations/variations-typography.js       | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/variations/variations-typography.js b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
index 689340cee9bd8e..07d390fec77233 100644
--- a/packages/edit-site/src/components/global-styles/variations/variations-typography.js
+++ b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
@@ -5,6 +5,7 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalVStack as HStack,
 	__experimentalVStack as VStack,
+	Tooltip,
 } from '@wordpress/components';
 
 /**
@@ -35,35 +36,38 @@ export default function TypographyVariations( { title, gap = 2 } ) {
 				{ typographyVariations &&
 					typographyVariations.length &&
 					typographyVariations.map( ( variation, index ) => (
-						<Variation
-							key={ index }
-							variation={ variation }
-							property="typography"
-						>
-							{ ( isFocused ) => (
-								<PreviewIframe
-									label={ variation?.title }
-									isFocused={ isFocused }
+						<Tooltip key={ index } text={ variation?.title }>
+							<div>
+								<Variation
+									variation={ variation }
+									property="typography"
 								>
-									{ ( { ratio, key } ) => (
-										<HStack
-											key={ key }
-											spacing={ 10 * ratio }
-											justify="center"
-											style={ {
-												height: '100%',
-												overflow: 'hidden',
-											} }
+									{ ( isFocused ) => (
+										<PreviewIframe
+											label={ variation?.title }
+											isFocused={ isFocused }
 										>
-											<TypographyExample
-												variation={ variation }
-												fontSize={ 85 * ratio }
-											/>
-										</HStack>
+											{ ( { ratio, key } ) => (
+												<HStack
+													key={ key }
+													spacing={ 10 * ratio }
+													justify="center"
+													style={ {
+														height: '100%',
+														overflow: 'hidden',
+													} }
+												>
+													<TypographyExample
+														variation={ variation }
+														fontSize={ 85 * ratio }
+													/>
+												</HStack>
+											) }
+										</PreviewIframe>
 									) }
-								</PreviewIframe>
-							) }
-						</Variation>
+								</Variation>
+							</div>
+						</Tooltip>
 					) ) }
 			</Grid>
 		</VStack>