diff --git a/packages/edit-site/src/components/global-styles/variations/variation.js b/packages/edit-site/src/components/global-styles/variations/variation.js
index 1c1418a54931f8..d08116577b0c89 100644
--- a/packages/edit-site/src/components/global-styles/variations/variation.js
+++ b/packages/edit-site/src/components/global-styles/variations/variation.js
@@ -6,6 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
+import { Tooltip } from '@wordpress/components';
 import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
@@ -23,7 +24,13 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
 );
 
-export default function Variation( { variation, children, isPill, property } ) {
+export default function Variation( {
+	variation,
+	children,
+	isPill,
+	property,
+	showTooltip,
+} ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 
@@ -64,30 +71,38 @@ export default function Variation( { variation, children, isPill, property } ) {
 		);
 	}
 
-	return (
-		<GlobalStylesContext.Provider value={ context }>
+	const content = (
+		<div
+			className={ clsx( 'edit-site-global-styles-variations_item', {
+				'is-active': isActive,
+			} ) }
+			role="button"
+			onClick={ selectVariation }
+			onKeyDown={ selectOnEnter }
+			tabIndex="0"
+			aria-label={ label }
+			aria-current={ isActive }
+			onFocus={ () => setIsFocused( true ) }
+			onBlur={ () => setIsFocused( false ) }
+		>
 			<div
-				className={ clsx( 'edit-site-global-styles-variations_item', {
-					'is-active': isActive,
-				} ) }
-				role="button"
-				onClick={ selectVariation }
-				onKeyDown={ selectOnEnter }
-				tabIndex="0"
-				aria-label={ label }
-				aria-current={ isActive }
-				onFocus={ () => setIsFocused( true ) }
-				onBlur={ () => setIsFocused( false ) }
+				className={ clsx(
+					'edit-site-global-styles-variations_item-preview',
+					{ 'is-pill': isPill }
+				) }
 			>
-				<div
-					className={ clsx(
-						'edit-site-global-styles-variations_item-preview',
-						{ 'is-pill': isPill }
-					) }
-				>
-					{ children( isFocused ) }
-				</div>
+				{ children( isFocused ) }
 			</div>
+		</div>
+	);
+
+	return (
+		<GlobalStylesContext.Provider value={ context }>
+			{ showTooltip ? (
+				<Tooltip text={ variation?.title }>{ content }</Tooltip>
+			) : (
+				content
+			) }
 		</GlobalStylesContext.Provider>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/variations/variations-color.js b/packages/edit-site/src/components/global-styles/variations/variations-color.js
index e84145afe2858e..6422ac0cb72d8e 100644
--- a/packages/edit-site/src/components/global-styles/variations/variations-color.js
+++ b/packages/edit-site/src/components/global-styles/variations/variations-color.js
@@ -32,6 +32,7 @@ export default function ColorVariations( { title, gap = 2 } ) {
 						variation={ variation }
 						isPill
 						property="color"
+						showTooltip
 					>
 						{ () => <StylesPreviewColors /> }
 					</Variation>
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..2aa5aaf80ee1f5 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
@@ -39,6 +39,7 @@ export default function TypographyVariations( { title, gap = 2 } ) {
 							key={ index }
 							variation={ variation }
 							property="typography"
+							showTooltip
 						>
 							{ ( isFocused ) => (
 								<PreviewIframe