Add tooltip to typography variations

amitraj2203 · Jun 19, 2024 · c017195 · c017195
1 parent 9da6486
commit c017195
Showing 1 changed file with 30 additions and 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
@@ -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>