From f06bcce49cf219c302d2ba4289477bfdde74542e Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 16 Nov 2023 17:04:48 +0100
Subject: [PATCH 1/3] Use tooltip for the Timezone only when necessary.

---
 .../components/src/date-time/time/timezone.tsx     | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/date-time/time/timezone.tsx b/packages/components/src/date-time/time/timezone.tsx
index 9fac1ec094ed8..253d6b730d98c 100644
--- a/packages/components/src/date-time/time/timezone.tsx
+++ b/packages/components/src/date-time/time/timezone.tsx
@@ -32,12 +32,22 @@ const TimeZone = () => {
 			? timezone.abbr
 			: `UTC${ offsetSymbol }${ timezone.offset }`;
 
+	// Replace underscore with space in strings like `America/Costa_Rica`.
+	const prettyTimezoneString = timezone.string.replace( '_', ' ' );
+
 	const timezoneDetail =
 		'UTC' === timezone.string
 			? __( 'Coordinated Universal Time' )
-			: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;
+			: `(${ zoneAbbr }) ${ prettyTimezoneString }`;
+
+	const isAbbrSameAsDetails =
+		`${ zoneAbbr } ${ prettyTimezoneString }`.trim() === zoneAbbr;
 
-	return (
+	return isAbbrSameAsDetails ? (
+		<StyledComponent className="components-datetime__timezone">
+			{ zoneAbbr }
+		</StyledComponent>
+	) : (
 		<Tooltip placement="top" text={ timezoneDetail }>
 			<StyledComponent className="components-datetime__timezone">
 				{ zoneAbbr }

From 045afd5fca0d81913ee94806f3b14e65ee01cdda Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 21 Nov 2023 15:20:37 +0100
Subject: [PATCH 2/3] Add changelog entry.

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 08082f99a00b9..c4b3a38e37a46 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 ### Bug Fix
 
+-   `DateTime`: Make the Timezone indication render a tooltip only when necessary. ([#56214](https://github.com/WordPress/gutenberg/pull/56214)).
 -   `ToolsPanelItem`: Use useLayoutEffect to prevent rendering glitch for last panel item styling. ([#56536](https://github.com/WordPress/gutenberg/pull/56536)).
 -   `FormTokenField`: Fix broken suggestions scrollbar when the `__experimentalExpandOnFocus` prop is defined ([#56426](https://github.com/WordPress/gutenberg/pull/56426)).
 -   `FormTokenField`: `onFocus` prop is now typed as a React `FocusEvent` ([#56426](https://github.com/WordPress/gutenberg/pull/56426)).

From a7dd3b9e1242d94c13cce46ededa45c10ce6d8ec Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 4 Dec 2023 14:12:34 +0100
Subject: [PATCH 3/3] Improve timezone detail check.

---
 packages/components/src/date-time/time/timezone.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/date-time/time/timezone.tsx b/packages/components/src/date-time/time/timezone.tsx
index 253d6b730d98c..9b08eac6307aa 100644
--- a/packages/components/src/date-time/time/timezone.tsx
+++ b/packages/components/src/date-time/time/timezone.tsx
@@ -40,10 +40,12 @@ const TimeZone = () => {
 			? __( 'Coordinated Universal Time' )
 			: `(${ zoneAbbr }) ${ prettyTimezoneString }`;
 
-	const isAbbrSameAsDetails =
-		`${ zoneAbbr } ${ prettyTimezoneString }`.trim() === zoneAbbr;
+	// When the prettyTimezoneString is empty, there is no additional timezone
+	// detail information to show in a Tooltip.
+	const hasNoAdditionalTimezoneDetail =
+		prettyTimezoneString.trim().length === 0;
 
-	return isAbbrSameAsDetails ? (
+	return hasNoAdditionalTimezoneDetail ? (
 		<StyledComponent className="components-datetime__timezone">
 			{ zoneAbbr }
 		</StyledComponent>