From f79778aad80e76cb4fa98679924ffebbc7d1c59e Mon Sep 17 00:00:00 2001
From: soupette <cyril.lpz@gmail.com>
Date: Wed, 31 Mar 2021 18:01:14 +0200
Subject: [PATCH] Fix tooltip i18n

Signed-off-by: soupette <cyril.lpz@gmail.com>
---
 .../LocaleListCell/LocaleListCell.js           | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/strapi-plugin-i18n/admin/src/components/LocaleListCell/LocaleListCell.js b/packages/strapi-plugin-i18n/admin/src/components/LocaleListCell/LocaleListCell.js
index e8ef24e90d..f02084eadf 100644
--- a/packages/strapi-plugin-i18n/admin/src/components/LocaleListCell/LocaleListCell.js
+++ b/packages/strapi-plugin-i18n/admin/src/components/LocaleListCell/LocaleListCell.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Padded, Text } from '@buffetjs/core';
 import { Tooltip } from '@buffetjs/styles';
 import get from 'lodash/get';
 
@@ -16,7 +17,7 @@ const LocaleListCell = ({ locales, localizations, locale: currentLocaleCode, id
   const defaultLocale = locales.find(locale => locale.isDefault);
   const hasDefaultLocale = localizationNames.includes(defaultLocale.code);
 
-  let localesNames;
+  let localesArray = [];
 
   if (hasDefaultLocale) {
     const ctLocalesWithoutDefault = localizationNames.filter(
@@ -33,22 +34,31 @@ const LocaleListCell = ({ locales, localizations, locale: currentLocaleCode, id
       ...ctLocalesNamesWithoutDefault,
     ];
 
-    localesNames = ctLocalesNamesWithDefault.join(', ');
+    localesArray = ctLocalesNamesWithDefault;
   } else {
     const ctLocales = localizationNames.map(locale => mapToLocaleName(locales, locale));
     ctLocales.sort();
 
-    localesNames = ctLocales.join(', ');
+    localesArray = ctLocales;
   }
 
   const elId = `entry-${id}__locale`;
+  const localesNames = localesArray.join(', ');
 
   return (
     <div>
       <span data-for={elId} data-tip={localesNames}>
         {localesNames}
       </span>
-      <Tooltip id={elId} place="top" delay={0} />
+      <Tooltip id={elId} place="bottom" delay={0}>
+        {localesArray.map(name => (
+          <Padded key={name} top bottom size="xs">
+            <Text ellipsis color="white">
+              {name}
+            </Text>
+          </Padded>
+        ))}
+      </Tooltip>
     </div>
   );
 };