From 2d7861abb9d66f074c8fdbe27c63ede45b463f22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Romain?= <sromain@talend.com>
Date: Mon, 4 Mar 2024 15:23:48 +0100
Subject: [PATCH] Fix tooltip alignment for buttons in list component (#5217)

---
 .changeset/fuzzy-nails-battle.md                             | 5 +++++
 .../Toolbar/DisplayModeToggle/DisplayModeToggle.component.js | 4 ++++
 2 files changed, 9 insertions(+)
 create mode 100644 .changeset/fuzzy-nails-battle.md

diff --git a/.changeset/fuzzy-nails-battle.md b/.changeset/fuzzy-nails-battle.md
new file mode 100644
index 00000000000..ee3f149cca9
--- /dev/null
+++ b/.changeset/fuzzy-nails-battle.md
@@ -0,0 +1,5 @@
+---
+"@talend/react-components": patch
+---
+
+fix: tooltip alignement for buttons in list component
diff --git a/packages/components/src/List/Toolbar/DisplayModeToggle/DisplayModeToggle.component.js b/packages/components/src/List/Toolbar/DisplayModeToggle/DisplayModeToggle.component.js
index 2d3108c2c7f..c57b33b7f1a 100644
--- a/packages/components/src/List/Toolbar/DisplayModeToggle/DisplayModeToggle.component.js
+++ b/packages/components/src/List/Toolbar/DisplayModeToggle/DisplayModeToggle.component.js
@@ -1,7 +1,10 @@
 /* eslint-disable react/display-name */
 import { memo } from 'react';
+
 import PropTypes from 'prop-types';
+
 import { ButtonIconToggle, StackHorizontal } from '@talend/design-system';
+
 import getDefaultT from '../../../translate';
 import { DISPLAY_MODE } from '../../ListComposition/constants';
 
@@ -24,6 +27,7 @@ export const DisplayModeActionIcon = memo(
 			<ButtonIconToggle
 				key={displayMode}
 				id={`${id}-${displayMode}`}
+				tooltipPlacement="top-end"
 				icon={icon}
 				isActive={displayMode === displayModeOption}
 				size="S"