Change tooltip in helper component

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-helper-plugin/lib/src/components/LabelIconWrapper/index.js

@@ -1,8 +1,32 @@
+import React, { useState } from 'react';
+import { Tooltip } from '@buffetjs/styles';
 import styled from 'styled-components';
 
-const LabelIconWrapper = styled.span`
+const Wrapper = styled.span`
   padding-left: 5px;
   cursor: pointer;
 `;
 
+const LabelIconWrapper = ({ children, title }) => {
+  const [isOver, setIsOver] = useState(false);
+
+  const handleMouseEvent = () => {
+    setIsOver(prev => !prev);
+  };
+
+  return (
+    <>
+      <Wrapper
+        data-for="block"
+        data-tip={title}
+        onMouseEnter={handleMouseEvent}
+        onMouseLeave={handleMouseEvent}
+      >
+        {children}
+      </Wrapper>
+      {isOver && title && <Tooltip id="block" />}
+    </>
+  );
+};
+
 export default LabelIconWrapper;

packages/strapi-helper-plugin/lib/src/components/NotAllowedInput/index.js

@@ -17,10 +17,12 @@ const NotAllowedInput = ({ label, labelIcon, description, error, spacerHeight })
 
   return (
     <BaselineAlignment bottom size="18px">
-      <Text fontWeight="semiBold" lineHeight="18px">
-        <span>{label}</span>
+      <Flex style={{ lineHeight: '18px' }}>
+        <Text fontWeight="semiBold" lineHeight="18px">
+          <span>{label}</span>
+        </Text>
         {labelIcon && <LabelIconWrapper title={labelIcon.title}>{labelIcon.icon}</LabelIconWrapper>}
-      </Text>
+      </Flex>
       <Field error={error}>
         <Padded left right size="sm">
           <Flex>

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js

@@ -3,6 +3,7 @@ import { get } from 'lodash';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
 import { FormattedMessage, useIntl } from 'react-intl';
+import { Flex } from '@buffetjs/core';
 import { LabelIconWrapper, NotAllowedInput } from 'strapi-helper-plugin';
 import pluginId from '../../pluginId';
 import connect from './utils/connect';
@@ -106,14 +107,16 @@ const DynamicZone = ({
     <DynamicZoneWrapper>
       {dynamicDisplayedComponentsLength > 0 && (
         <Label>
-          <p>
-            <span>{metadatas.label}</span>
+          <Flex>
+            <p>
+              <span>{metadatas.label}</span>
+            </p>
             {formattedLabelIcon && (
               <LabelIconWrapper title={formattedLabelIcon.title}>
                 {formattedLabelIcon.icon}
               </LabelIconWrapper>
             )}
-          </p>
+          </Flex>
           <p>{metadatas.description}</p>
         </Label>
       )}

packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/index.js

@@ -282,18 +282,21 @@ function SelectWrapper({
     <Padded>
       <BaselineAlignment />
       <Flex justifyContent="space-between">
-        <Text fontWeight="semiBold">
-          <span>
-            {label}
-            {!isSingle && ` (${associationsLength})`}
-          </span>
-
+        <Flex>
+          <Text fontWeight="semiBold">
+            <span>
+              {label}
+              {!isSingle && ` (${associationsLength})`}
+            </span>
+          </Text>
           {labelIconformatted && (
-            <LabelIconWrapper title={labelIconformatted.title}>
-              {labelIconformatted.icon}
-            </LabelIconWrapper>
+            <div style={{ lineHeight: '13px' }}>
+              <LabelIconWrapper title={labelIconformatted.title}>
+                {labelIconformatted.icon}
+              </LabelIconWrapper>
+            </div>
           )}
-        </Text>
+        </Flex>
         {isSingle && link}
       </Flex>
       {!isEmpty(description) && (