From f43609cd243c3de4a675adba13802ccd78354c10 Mon Sep 17 00:00:00 2001
From: Gbacc <Gbacc@users.noreply.github.com>
Date: Tue, 21 Nov 2023 10:36:44 +0100
Subject: [PATCH] fix(TDOPS-5671): fix tooltip display when empty title (#4999)

* fix(TDOPS-5671): fix tooltip display when empty title

* changeset

* improve accessibility
---
 .changeset/blue-kings-switch.md               |  5 ++++
 .../src/components/Tooltip/Tooltip.cy.tsx     | 13 ++++++++
 .../src/components/Tooltip/Tooltip.tsx        | 30 ++++++++++---------
 3 files changed, 34 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/blue-kings-switch.md

diff --git a/.changeset/blue-kings-switch.md b/.changeset/blue-kings-switch.md
new file mode 100644
index 00000000000..409b0760dba
--- /dev/null
+++ b/.changeset/blue-kings-switch.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+TDOPS-5671 - Fix Design System tooltip display in case of empty value
diff --git a/packages/design-system/src/components/Tooltip/Tooltip.cy.tsx b/packages/design-system/src/components/Tooltip/Tooltip.cy.tsx
index 8e1c7f90ca1..3792732d748 100644
--- a/packages/design-system/src/components/Tooltip/Tooltip.cy.tsx
+++ b/packages/design-system/src/components/Tooltip/Tooltip.cy.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable testing-library/prefer-screen-queries */
+
 /* eslint-disable testing-library/await-async-queries */
 import { Tooltip } from './Tooltip';
 
@@ -16,6 +17,18 @@ context('<Tooltip />', () => {
 			cy.findByTestId('my.tooltip').should('be.visible');
 		});
 
+		it('should not show a tooltip when empty title', () => {
+			cy.mount(
+				<Tooltip title="" data-testid="my.tooltip">
+					<button>button</button>
+				</Tooltip>,
+			);
+
+			cy.findByTestId('my.tooltip').should('not.exist');
+			cy.get('button').click();
+			cy.findByTestId('my.tooltip').should('not.exist');
+		});
+
 		it('Should be able to override baseId', () => {
 			const tooltipBaseId = 'base-id';
 			cy.mount(
diff --git a/packages/design-system/src/components/Tooltip/Tooltip.tsx b/packages/design-system/src/components/Tooltip/Tooltip.tsx
index bf8348fe8e6..57f91d7c928 100644
--- a/packages/design-system/src/components/Tooltip/Tooltip.tsx
+++ b/packages/design-system/src/components/Tooltip/Tooltip.tsx
@@ -91,23 +91,25 @@ export const Tooltip = ({ id, children, title, placement = 'top', ...rest }: Too
 				children,
 				{
 					...getReferenceProps(),
-					'aria-describedby': safeId,
+					...(title && { 'aria-describedby': safeId }),
 				},
 				floating.refs.setReference,
 			)}
-			<FloatingPortal>
-				<div
-					{...getFloatingProps()}
-					id={safeId}
-					ref={floating.refs.setFloating}
-					className={styles.container}
-					style={{ display: isOpen ? 'block' : 'none', ...floating.floatingStyles }}
-					{...rest}
-				>
-					<FloatingArrow ref={arrowRef} context={floating.context} />
-					{title}
-				</div>
-			</FloatingPortal>
+			{!!title && (
+				<FloatingPortal>
+					<div
+						{...getFloatingProps()}
+						id={safeId}
+						ref={floating.refs.setFloating}
+						className={styles.container}
+						style={{ display: isOpen ? 'block' : 'none', ...floating.floatingStyles }}
+						{...rest}
+					>
+						<FloatingArrow ref={arrowRef} context={floating.context} />
+						{title}
+					</div>
+				</FloatingPortal>
+			)}
 		</>
 	);
 };